【CSS】元素块与文字的各种居中解决方案

浏览数：37 / 时间：2015年06月09日

元素块的居中

　　首先有这样一个200*200px的元素块在界面内。

　　元素块的水平居中：

　　如果想要让其水平居中，则有三种方法：

　　　　第一种是知道屏幕的长宽，则根据计算，（屏幕宽X-元素块宽Y）/ 2的结果是元素块向右偏移的长度，不过这种方法很蠢笨，通过外边距调整元素的位置只有在调整元素间的间距时才有作用；

　　　　至于第二种，就很合适了，我们不必知道屏幕的宽度，只需要设置外边距:　

.box { width: 200px; height: 200px; background: #333; margin-left: auto; margin-right: auto;}

　　　　也可以这样写：

.box { width: 200px; height: 200px; background: #333; margin: 0 auto;}

　　　　就可以了！效果：

　　　　第三种方法是运用定位的方法，先把元素块绝对定位，然后左移50%的屏幕宽度，再用负边距向右移元素块50%的宽度。

.box { width: 200px; height: 200px; background: #333; position: absolute; left: 50%; margin-left: -100px;}

　　　　效果：

　　很显然，第二种方法是最简单也是最适用的方法，第三种更适用于元素块在屏幕中的水平垂直居中。

　　元素块的垂直居中：

　　关于元素块的垂直居中，有两种实现的方法。第一种同样是计算坐标偏移的方法，一般不采用。另一种就是运用绝对定位和外边距的方法来垂直居中乃至水平垂直居中。

　　垂直居中：

.box { width: 200px; height: 200px; background: #333; position: absolute; top: 50%; margin-top: -100px;}

　　元素块的水平垂直居中：

.box { width: 200px; height: 200px; background: #333; position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px;}

　　其实很简单，就是水平居中和垂直居中的结合罢了！

　　元素块相对于父元素块的居中：

　　比如下面的".content"块是".box"块的子元素块:

.box { width: 500px; height: 400px; border: 1px solid;}
.content {width: 100px; height: 100px; background: #333;}

　　content的水平居中：

.box { width: 500px; height: 400px; border: 1px solid;}
.content {width: 100px; height: 100px; background: #333; margin: 0 auto;}

　　content的垂直居中：

.box { width: 500px; height: 400px; border: 1px solid; position: relative;}
.content {width: 100px; height: 100px; background: #333; position: absolute; top: 50%; margin-top: -50px;}

　　这里要注意：当子元素设置为绝对定位absolute时，如果想对于父元素定位，需要父元素设置"position:relative",即父元素设置为相对定位，负责子元素将相对于body定位。

　　content的水平垂直居中：　

.box { width: 500px; height: 400px; border: 1px solid; position: relative;}
.content {width: 100px; height: 100px; background: #333; position: absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}

文字的居中

　　文字的水平居中：

　　现在是这种情况，元素块中有一行文字，需要将其水平居中。

　　很简单，只需要设置一个属性：

.box { width: 400px; height: 300px; border: 1px solid;}
.text {text-Align: center;}

　　文字的垂直居中：

　　也很简单，只需要设置一个属性，将其行高和元素框高相等：　

.box { width: 400px; height: 300px; border: 1px solid;}
.text {line-height: 300px;}

　　文字的水平垂直居中：

.box { width: 400px; height: 300px; border: 1px solid; margin: 100px auto;}
.text {text-Align: center; line-height: 300px;}

　　如果是多行文字怎么办，很简单，在文字外套一个层级，可以为"div"，也可以讲inline元素设置为"display: block"，先将文字垂直居中，再讲嵌套的文字块在父元素块中居中，这就将其分解为两个问题，解决起来很容易。

　　以上就是居中的几个解决方法，其他一些问题在遇到后会慢慢的整理汇总出来，以供记录和参考。

　　最后附上html代码。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 5         <link type="text/css" rel="stylesheet" href="resource/css//temp.css" />
 6         <title>CSS各种居中</title>
 7         <link rel="icon" href="favicon.ico" type="images/x-icon" />
 8     </head>
 9     
10     <body>
11         <div class="box">
12             <div class="content"></div>
13             <h3 class="text">这是块中的一行文字！</h3>
14         </div>
15     </body>
16 </html>