首页 > 代码库 > CSS-垂直|水平居中问题的解决方法总结

CSS-垂直|水平居中问题的解决方法总结

2024-08-27 22:18:09   220人阅读

　　题外话：前两天和专业老师探讨最近的一个项目，涉及到对一个浮动的盒子局中的问题，老师的解决方法打开了我的新思路。让我有了总结一下平时的居中问题的想法。不然可能忘掉了以后又要到处寻找解决办法了。另外也给我一个启示：启示解决方法有很多，就看你能不能对知识灵活运用。也是通过这件事我体会到了“灵活运用”的真正含义。做事情是这样，做技术尤其要这样。

　　这个总结要一直在整理完善中，以后有了什么新的想法、新的解决办法都要再修改。可惜不在github中，不然可以集思广益了。

　　———————————————--------------—开始-分割线—-----------------———————————————

一、垂直居中

 

　　1.行高+高度：line-height：Npx（N = 与元素高度相同的值）；

　　正如N的值那样，这种解决方法就是要盒模型是有高度设置的。举例：

.box {
    width: 45px;
    height: 60px;
    line-height: 60px;
}

　　高度是60px，行高也设置为60px，这样，就可以实现垂直居中的问题。

　　如图：技术分享。影视二字就可以垂直居中了。

可行性分析：就像图片中看到的那样，只有两个字，他们排在一行不会换行，一旦换行的话，行高就会应用于文字，由于行高过大的原因，会导致剩下的文字跑出画面了。

如右图：技术分享

　

2：定位+外边距：position：absolute；top：50%；margin-top: -Bpx;(B是元素的高度/2的值)

　　这里就不一定需要盒模型的固定高度了，只需要物体的高度，比如字体。至于怎么获得字体的高度，就去浏览器的调试工具（Dreamweaver也可以也有这个功能，实时编辑的工具都是可以的。）中看。当不设置高度值得时候，将鼠标移到对应的标签上，自然会有宽高显示出来。

喏：技术分享。这么一看高度就是19px；

　　所以设置的话：

.box{ 
    position: absolute;
    top: 50%;
    margin-top: -10px;
}

可行性分析：绝对定位absolute是一个魔鬼，不到万不得已不能碰他。

　　那么怎么既避免absolute的绝对定位使用，又要实现想要的布局呢？

 

3：外边距+高度：margin-top：50%-Mpx；(M是元素的高度/2的值)

　　不知道这种写法，以前也没有见过。但是正如开篇说的那样，我从来没这么想过可以这么玩css，所以很多次我既想要设置width是100%，又要刨除掉padding、border等的值。你就不知道应该是百分几了！当然我后来是用box-sizing解决了，让padding‘等算进了总width中，但有时候涉及到响应式的话，还是很麻烦的要弄好多个@media来限制，动辄上30了，那是多么的土且笨的解决啊。直到那么一天，我接受了老师的偶然实验的想法，让我眼前一亮，那就是让css做加减法！

　　说到让css自己做加减法，我以前记得看一本书（or文章吧！who care）是有讲过css可以做加减法，但我竟然没想到，让他做不同单位值得加减法！老师也是一脸兴奋的跟我讲，我也不知道可以这样，那天就是试了试，没想到成功了。哈哈，是啊，伟大而又神奇的css，总是给我们惊喜。这就是我爱它的原因吧。

　　可能你现在会想到或已经知道有一个css属性可以做计算，没错！就是calc().

　　这个属性我看过一片前辈大神的博客，用法讲的很详细，链接贴在这里了：http://www.w3cplus.com/css3/how-to-use-css3-calc-function.html

　　但我想，直接让css做加减法既然是可以的，何必还调用这个看上去就像个js函数一样的东东呢？毕竟他不是兼容性的。

　　css直接做加减法的方法虽然直白且低级，但是我们没有后遗症啊！（我只是随便说说，毕竟我没有测试过！不负责任奥！！！233333）

 

　　废话说了这么多，就是一个核心理念，不管什么单位和数值了，那么头疼的响应式运算，就交给我们的css自动运算吧。

　　额(⊙o⊙)…貌似变换成了水平的问题解决。

　　好，那接下来就是水平：

——————————————————————————————————————————————————

二、水平居中

 

1：文本居中：text-align：center（不解释）

可行性分析：一个盒子内部的文字、元素（有固定宽度）的居中问题他是可以解决的。

　　那么条件不够呢？

　　没条件就要创造条件嘛！没有wrap就包一个嘛！没有宽度就定下来嘛！别矫情。问题总是可以解决的。

 

2：定宽+自动水平外边距：margin：0 auto；（更加不想解释）

　　0：垂直方向margin可变值，表示margin-top、margin-bottom两个的值，如果设置的话，二者一样。如果不想二者一样，可以在auto后再设置一个：margin: Apx auto Bpx;

　　auto:水平方向margin，auto就是自动，也算是让css自动计算距离左右的位置吧，

可行性分析：必须要元素定宽，即要设置宽度值。

 

3：绝对定位+外边距：position：absolute；left：50%；margin-left: -Bpx;(B是元素的宽度/2的值)（更加不想解释）

　　有个盒模型，他有自己的宽度高度、又是绝对定位。这种情况，想让他水平居中的话用text-align与margin：0 auto；的方法都是不可取的。毕竟absolute已经飞起来了，脱离了文档流，任何限制都对他没有作用了。但是，好处是不管他以前什么属性，用了absolute之后就可以设置宽高了。所以就有了解决办法。

.box{
    position: absolute;
    top: -15px;
    left: 50%;
    width: 30px;
    height: 30px;
    margin-left: -15px;
}

 

可行性分析：不到玩不得已别碰absolute，毕竟他生来不是为了布局的。

 

 4：margin-left: 50% -  Wpx;(W = Width/2的值)（猜测阶段，未实验证实）

 

但是

 就像可以

{

width：100% - 40px;

}

 这么写一样，没有什么不可能，只有你想不到，没有css做不到。

-------------------------------------————————————————结——————————————————---------------------------------

 

技术分享 
 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4             <meta charset="UTF-8">
 5             <title>测试</title>
 6         <meta name="author" content="郭菊锋,tel-15127145529,qq-702004176"> 
 7        </head>
 8     <body>   
 9     </body>
10 </html>
View Code

2016-12-18  15:07:04

CSS-垂直|水平居中问题的解决方法总结


联系
我们