CSS 垂直居中方法汇总（css div垂直居中的几种方法）

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

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。如下代码：

hi,imooc!

css代码：

    .container{
    height:100px;
    line-height:100px; /* 仅能用于单行文本 */
    background:#999;
}

垂直居中-图片以及行内块元素

css代码：

垂直居中-父元素高度确定的多行文本(方法一)

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

方法一：使用插入table(包括tbody、tr、td)标签, 同时设置vertical-align：middle。

说到竖直居中,css中有一个用于竖直居中的属性vertical-align,但这个样式只有在父元素为td 或th时,才会生效。所以又要插入table标签了。

下面看一下例子：

html代码：

看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。

css代码：

table td{height:500px;background:#ccc}

因为td标签默认情况下就默认设置了vertical-align为middle, 所以我们不需要显式地设置了。

垂直居中-父元素高度确定的多行文本(方法二)

在chrome、firefox及IE8以上的浏览器下可以设置块级元素的display为table-cell, 激活vertical-align属性, 但注意IE6、7并不支持这个样式。

html代码：

看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。

css代码：

这种方法的好处是不用添加多余的无意义的标签,但缺点也很明显,它的兼容性不是很好,不兼容 IE6、7。

垂直居中--方法三

实例1:将内层div的文本垂直居中

看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。
看我是否可以居中。

实例2：将内层垂直居中、外层水平居中

锄禾日当午，

汗滴禾下土。

谁知盘中餐，

粒粒皆辛苦。

实例3: 使用绝对定位垂直居中

实例4: 使用绝对定位垂直居中

您确定删除：重庆万州公交坠江事件结果公布后，司乘纠纷和公交驾驶安全问题成为人们热议的焦点，如何预防和避免恶性结果的发生，才是问题的关键。“鼓励市民举报，并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午，西安市公安局公共交通分局召开媒体通气会，通报西安相关安全举措。这条消息吗

绝对定位(固定定位)之后, 所有标准流的规则, 都不适用了。所以margin:0 auto; 失效。

解决办法：left:50%; margin-left:负的宽度的一半。（三句话）

div{
width: 600px;
height: 60px;
position: absolute;? /* → 第一句? */
left: 50%;? ?//? ?/*? → 第二句? ?*/?
top: 0;
margin-left: -300px;? ? /*→ 第三句。宽度的一半*/
}

实例4：使用绝对定位和margin:auto垂直居中

您确定删除：重庆万州公交坠江事件结果公布后，司乘纠纷和公交驾驶安全问题成为人们热议的焦点，如何预防和避免恶性结果的发生，才是问题的关键。“鼓励市民举报，并对勇于制止干扰公交车正常行驶违法行为的公民予以奖励。”昨日下午，西安市公安局公共交通分局召开媒体通气会，通报西安相关安全举措。这条消息吗