css居中方法汇总

水平居中

①margin: 0 auto

子元素设置margin值为0 auto即可。

使用范围：所有块级元素

// html<div class="parent">    <div class="child"></div></div>// css.parent {  width: 500px;  height: 300px;  border: 1px solid #333;}.child {  width: 80px;  height: 30px;  background: blue;  margin: 0 auto;   // 关键样式}

预览：

②display:inline-block

设置父元素text-align: center;，
设置子元素display: inline-block;

使用范围：所有元素

// html<div class="parent">  <div class="child"></div></div>// css.parent {  width: 500px;  height: 300px;  border: 1px solid #333;  text-align: center;  // 关键样式}.child {  width: 80px;  height: 30px;  background: blue;  display: inline-block;  // 关键样式}

③position:relative

将子元素设置为相对定位（position: relative;），
向右偏移基于父元素的50%（left: 50%;），
再向左偏移基于自身的50%（transform: translateX(-50%);）

使用范围：所有元素

// html<div class="parent">  <div class="child"></div></div>// css.parent {  width: 500px;  height: 300px;  border: 1px solid #333;}.child {  width: 80px;  height: 30px;  background: blue;  position: relative;           // 关键样式  left: 50%;                    // 关键样式  transform: translateX(-50%);  // 关键样式}

④display:table

使用该方法需要注意子元素的宽度问题；
同时该方法也同样可以用于垂直居中。

// html<div class="parent">  <div class="child"></div></div>// css.parent {  width: 500px;  height: 300px;  border: 1px solid #333;  box-sizing: border-box;  padding: 100px;  display: table;    // 关键样式}.child {  width: 80px;  height: 30px;  background: blue;  display: table-cell;   // 关键样式}

预览：

⑤flex

使用flex布局进行居中，同样可以用于垂直居中。

```// html<div class="parent">  <div class="child"></div></div>// css.parent {  width: 500px;  height: 300px;  border: 1px solid #333;  box-sizing: border-box;  display: flex;            // 关键样式  justify-content: center;  // 关键样式}.child {  width: 80px;  height: 30px;  background: blue;}

方法比较

毫无疑问第一种方法是最常用的，简单且原理易懂。
另外第五种方法也推荐使用，不过要注意兼容低版本浏览器的问题。

而方法二至方法四，了解下原理就行，真用于水平居中就没这个必要；另外对于方法三，其在其他方面的用处比较广泛。

---

垂直居中

① 单行文本垂直居中

若元素的height与line-height相等，元素内文本即可垂直居中。
但是，该方法只适用于单行文本，对于多行文本，该方法不适用。

// html<div class="parent">  123456</div>//css.parent {  width: 500px;  height: 300px;  border: 1px solid #333;  box-sizing: border-box;  line-height: 300px;}

②多行文本垂直居中

对于多行文本，前面提到过使用display：table-cell可以实现水平垂直居中。此方法对于单行文本、多行文本都适用。

// html<div class="parent">  <div class="child"></div></div>// css.parent {  width: 500px;  height: 300px;  border: 1px solid #333;  box-sizing: border-box;  padding: 100px;  display: table;    // 关键样式}.child {  width: 80px;  height: 30px;  background: blue;  display: table-cell;   // 关键样式}

另外，还可以使用vertical-align进行居中。

// html<div class="parent">  <span class="child">123<br>456<br>789</span></div>//css.parent {  width: 300px;  height: 200px;  border: 1px solid #ccc;     line-height: 200px;      // 关键样式}.child {  display: inline-block;   // 关键样式  line-height: 22px;       // 关键样式  vertical-align: middle;  // 关键样式}

③ 图片垂直居中

使用绝对定位，同时各个方向的偏移量设置为0。
此方法同样可以用于图片的水平居中、垂直居中、水平垂直居中。

// html<div class="img-wrap">    <img src="http://dummyimage.com/200x200/f66/"/></div>// css.img-wrap {    position:relative;    height: 400px;    width: 400px;    border: 1px solid}.img-wrap > img {    position:absolute;    top:0;    bottom:0;    left:0;    right:0;    margin:auto;}