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

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; }

如需转载,请注明文章出处和来源网址:http://www.divcss5.com/html/h64642.shtml

张贴在3