水平/垂直居中详解

水平/垂直居中 [出处]

　 @Huan艺斌  

使用table

无论水平还是垂直居中，使用 table 实现都超简单，只需 text-algin:center;vertical-align:middle; 就可以了。这便是下面的水平/垂直居中的第一个方法。

小提示：下面方法中的水平居中案例及垂直居中的前四个案例摘自曹刘阳所著《编写高质量代码——Web前端开发修炼之道》的Page104-112　　　　 方法三（inline-block + vertical-align:middle 方法）取自QQ空间相册预览的垂直居中效果，提取后的效果预览

水平居中

除上述 table 方法外，其他的CSS实现居中会遇到很多种情况，不同的情况使用的方法不同。

文本、图片等行内元素的水平居中

给父元素设置 text-align:center 可以实现文本、图片等行内元素的水平居中，如下：

hello world!

---

.tc{text-align:center}

<p class="tc">hello world!</p>
<p class="tc"><img src="img/"></p>

注意：以上方法适用的是内联元素。

确定宽度的块级元素的水平居中

确定宽度的块级元素的水平居中是通过设置 margin-left:auto 和 margin-right:auto 来实现的，如下：

.bc{margin-left:auto;margin-right:auto;}
.ctest{width:300px;height:100px;background:#ccc;}

<div class="ctest bc"></div>

不确定宽度的块级元素的水平居中

不确定宽度的块级元素有三种方式可以实现居中。以分页模块为例，因为分页的数量是不确定的，所以我们不能通过设置宽度来显示它的弹性。

方法一：外嵌套table方法

1

1 2 3

1 2 3 4 5

.bc{margin-left:auto;margin-right:auto;}
.pages1 li{float:left;display:inline;margin-right:5px;}
.pages1 a{float:left;display:block;padding:0 9px; height:25px; line-height:25px;}

<table class="bc">
    <tr><td>
        <ul class="pages pages1">
            <li><a href="#">1</a></li>
        </ul>
    </td></tr>
</table>

这里用到了一个有趣的标签 table 来帮助实现了不确定宽度的块级元素的水平居中，table有趣的地方在于它本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置 margin-left:auto 和 margin-right:auto 就可以实现水平居中！将 ul 包含在 table 标签内，对 table 设置 margin-left:auto 和 margin-right:auto 就可以使 table 水平居中，间接使 ul 实现了水平居中。

这种做法很巧妙，但缺点是增加了无语义的标签，加深了标签的嵌套层数。

方法二：变块级为inline类型

• 1

• 1 
• 2 
• 3

• 1 
• 2 
• 3 
• 4 
• 5

.pages2{text-align:center; padding:5px;}
.pages2 li{display:inline;}
.pages2 a{padding:4px 9px; line-height:25px;}

<ul class="pages pages2">
    <li><a href="#">1</a></li>
</ul>

这里换了种思路，改变块级元素的display为 inline 类型，然后使用 text-align:center 来实现居中。相较于方法一，它的好处是不用增加无语义标签，简化了标签的嵌套深度，但它也存在一定的问题：它将块级元素的 display 类型改为 inline，变成了行内元素，而行内元素比起块级元素缺少一些功能，比如设定长宽值，在某些特殊需求的CSS设置中，这种方法可能会带来一些限制。

注：其实这里使用变块级为inline-block类型更为合适，此方法为水平居中 的推荐方案。

方法三：使用position:relative

• 1

• 1
• 2
• 3

• 1
• 2
• 3
• 4
• 5

.pages3{float:left;clear:both;padding-top:5px;position:relative;left:50%;}
.pages3 li{float:left;display:inline;margin-right:5px;position:relative;left:-50%;}
.pages3 a{float:left;padding:0 9px; height:25px; line-height:25px;}

<ul class="pages pages3">
    <li><a href="#">1</a></li>
</ul>

方法三通过给父标签设置 float，然后父元素设置 position:relative 和 left:50%;，子元素设置 position:relative 和 left:-50%;来实现水平居中。它可以保留块级元素仍以 display:block 的形式显示，而且不会添加无语义标签，不增加嵌套深度，但它的缺点是设置了position:relative，带来了一定的副作用。

此方法可以解决浮动居中的问题，详情参见float-center.html。

这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方式可以视具体情况而定。

垂直居中

父元素高度不确定的文本、图片、块级元素的垂直居中

父元素高度不确定的文本、图片、块级元素的垂直居中是通过给父级容器设置相同上下边距实现的，如下：

hello world!

---

---

.mtest{padding:20px 0}

<p class="mtest">hello world!</p>
<p class="mtest"><img src="img/"></p>
<div class="mtest"><p class="ctest"></p></div>

父元素高度确定的单行文本的垂直居中

设置此单行文本 line-height 高度等于父元素高度即可

hello world!

<p style="height:100px;line-height:100px;background:#ccc;">hello world!</p>

父元素高度确定的多行文本、图片、块级元素的垂直居中

父元素高度确定的多行文本、图片、块级元素的垂直居中有两种方法。

方法一：外嵌套table方法

说到垂直居中，CSS中有一个用于垂直居中的属性 vertical-align，但只是当父元素为td或tr时，这是属性才会生效，对于其他块级元素，例如div、p等，默认情况下是不支持 vertical-align 属性的。在Firefox和IE8+下，可以设置块级元素的display类型为 table-cell，激活vertical-align属性，但在IE6和IE7并不支持 display:table-cell，所以这种方法没办法跨浏览器兼容。

但我们可以使用最原始的笨方法来实现兼容——既然不支持块级元素设置为table-cell来模拟表格，那么我们就直接使用表格好了，如下：

hello world! hello world! hello world!

---

---

table.middle{height:130px;background:#ccc;}

<table class="middle">
    <tr><td>
        hello world!<br>
        hello world!<br>
        hello world!
    </td></tr>
</table>

<table class="middle">
    <tr><td>
        <img src="img/center-middle.png" height="60">
    </td></tr>
</table>

<table class="middle">
    <tr><td>
        <div class="ctest"></div>
    </td></tr>
</table>

因为td标签默认情况下就隐式地设置了vertical-align的值为middle，所以我们不需要在显式地设置一遍。

方法二：display:table-cell + hack

对支持 display:table-cell 的IE8+和Firefox用 display:table-cell 和 vertical-align:middle 来实现居中，对不支持 display:table-cell 的IE6和IE7，使用特定的hack，如下：

hello world!
hello world!
hello world!

---

---

/* 垂直居中 */
.box{position:relative;height:120px;display:table-cell;vertical-align:middle;background:#ccc;}
.verticalWrap{*position:absolute;*top:-50%;}
.vertical{*position:relative;*top:-50%;}

<div class="box2">
    <div class="verticalWrap">
        <div class="vertical">
            hello world!<br>
            hello world!<br>
            hello world!
        </div>
    </div>
</div>

<div class="box2">
    <div class="verticalWrap">
        <img class="vertical" src="img/center-middle.png" height="60">
    </div>
</div>

<div class="box2">
    <div class="verticalWrap">
        <div class="ctest vertical"></div>
    </div>
</div>

利用hack技术区别对待标准浏览器和IE6/7，在不支持 display:table-cell 的IE6/7下，通过给父子两层元素分别设置 top:50% 和top:-50% 来实现居中。这种方法的好处是没有增加额外的标签，但它的缺点也很明显，一方面使用了hack，不利于维护，另一方面，它需要设置 position:relative和 position:absolute，带来了副作用。

方法三：inline-block + vertical-align:middle 方法

父元素高度固定、子元素的高度不固定，使用inline-block 元素设置 vertical-align:middle 后会垂直居中对齐，添加 .middle-full 空标签辅助实现，如下：

注意： 使用这种方式，针对图片的自动缩放使用 max-width:100%; 时，middle-full和图片间不能有空格空行等

hello world!
hello world!
hello world!

---

 

---

/* 垂直居中 */
.middle-item,.middle-full{display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}
.middle-full{height:100%;width:0;overflow:hidden;font-size:0;}

<div class="box3">
    <div class="middle-full"></div>
    <p class="middle-item">
        hello world!<br>
        hello world!<br>
        hello world!
    </p>
</div>

<div class="box3">
    <div class="middle-full"></div>
    <img class="middle-item" src="img/center-middle.png" height="60">
</div>

<div class="box3">
    <div class="middle-full"></div>
    <div class="ctest middle-item"></div>
</div>

利用inline-block 属性的元素设置 vertical-align:middle 后垂直居中对齐的特性，在父标签内放置辅助标签 .middle-full 等高于父标签（宽度为0），表现元素会垂直居中对齐于此标签，从而实现想要的效果。优点相比于方法二大大减少了标签嵌套层级，且更容易实现水平垂直居中（再添加text-align:center即可），同时避免了方法二设置position属性可能引起的副作用。

CSS实现 图片等比缩放并垂直居中

不借助 空标签 而是使用 line-height 实现垂直居中(line-height 为父级元素高度)

注意： 使用这种方式，不同尺寸的盒子需要设置不同的 line-height，并且网页文件必须使用 HTML5 头部声明。

/* 垂直居中 */
.box4{ height:200px; text-align:center;background:#ccc; line-height: 200px;}
.img-middle{max-height:100%;display:inline-block;*display:inline;*zoom:1;vertical-align:middle;}

<div class="box4">
    <img class="img-middle" src="img/center-middle.png" height="60">
</div>

弹窗的居中 定位实现

.Lx,.Ly{position:absolute;left:50%;top:50%;background:red;}
.Lx{width:100px;height:30px;margin-left:-50px;margin-top:-15px;}
.Ly{width:30px;height:100px;margin-left:-15px;margin-top:-50px;}

问题及注意事项：