CSS元素居中

很多时候，我们需要让元素居中显示:

1. 一段文本的水平居中:

水平居中

.text-center {   

width: 200px;   

height: 100px;   

text-align: center;  /* 让文本水平居中 */   

color: #fff;   

background-color: #f54;}

2. 让图片水平居中，父元素使用 text-align: center;

.img-center {    

width: 200px;    

height: 120px;    

text-align: center; /* 让图片水平居中 */   

 background-color: #f54;}

说明：

图片是行内元素，从一开始我视频学习的时候，有一个老师好像说过图片是行内块级元素(inline-block)，听起来好像很有道理的，因为图片可以使用 text-align: center; 将其水平居中显示，并且还能设置宽和高，很长时间以来没有怀疑过！后来喜欢上了“溯本求源”，才发现了原来不是那么回事：

在 ie, edge, chrome, firefox, opera 中对于 img 的默认显示方式是： display: inline;

img 是 inline，还是比较容易想得通，像文本一样可以通过 text-align: center; 设置为水平居中。

3. 块级元素水平居中，使用 margin-right: auto; margin-left: auto;

.parent-box {    

width: 250px;    

height: 150px;    

background-color: #f98;

}

.child-box {    

width: 200px;    

height: 100px;    

background-color: #f00;    

margin-left: auto;    

margin-right: auto;

}

4. 单行文本的垂直居中，让 line-height 和 height 相等。

.text-middle {   

width: 200px;   

height: 100px;   

line-height: 100px;   

background-color: #f00;   

color: #fff;

}

5. 不确定高度的一段文本竖直居中，这里不适用高度，使用 padding-top: ...; padding-bottom: ...; padding-top 和 padding-bottom 值相同.

6. 确定高度的块级元素竖直居中，使用 position: absolute; top: 50%; margin-top: ...;(margin-top的值为自身高度的值的一半的负值);

7. 绝对定位实现水平垂直居中，使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto;

说明：对于块儿级元素的垂直居中，推荐这么做，这也是我比较喜欢的方法。

需要注意的地方是，对父元素要使用 position: relative; 对子元素要使用 position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; 缺一不可。如果只需要垂直居中，right: 0; 和 left: 0; 可以省略不写，margin: auto; 可以换成 margin-top: auto; margin-bottom: auto;；如果只需要水平居中，top: 0; bottom: 0; 可以省略不写,margin: auto; 可以换成 margin-rihgt: auto; margin-left: auto; 。