CSS利用display实现水平垂直居中

 

利用display的table-cell属性值

 

1.利用display+vertical-align

父元素设置display: table-cell;和vertical-align: middle;，子元素设置margin: 0 auto;。

 

添加样式：

 

.box {

  display: table-cell;

  vertical-align: middle;

}

 

.inner { margin: 0 auto; }

 

2.利用display+vertical-align+text-align

父元素设置display: table-cell以及内容的水平和垂直居中，注意子元素要设置为行内块。

 

添加样式：

 

.box {

  display: table-cell; /* 此元素会作为一个表格单元格显示 */

  vertical-align: middle; /* 把此元素放置在父元素的中部 */

  text-align: center;

}

 

.inner { display: inline-block; }