常用居中布局总结

一、水平居中

1、行内元素

父元素设置text-align:center.

2、块级元素

margin:0 auto;

二、块级元素垂直居中

1、上下padding相等

容器高度不固定，高度由内容撑开

2、绝对定位

• 宽高固定
  设置left:50%，top:50%，配合负margin，margin-top和margin-left：- 宽高的一半

• 宽高不定
  设置left:50%，top:50%，
  transform:translate(-50%,-50%);//相对自己移动
  只适用于ie9+

注：设置margin百分比是相对容器

3、flex

.space {
display: flex; /* 弹性布局 /
align-items: center; / 垂直居中 /
justify-content: center; / 水平居中 */
}

三、行内元素垂直居中

1、原理是设置一个与容器等高的元素，使元素与其中线对齐

• vertical-align只对display：inline-block有效
• 对于对于可替换元素（如 img、input、select 等），不存在 content （内容或后代元素）在标签中，伪元素无效，所以写在父标签中

.box:before{
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
}
.box img{
vertical-align: middle;
background: blue;
}

2、父容器设置成表格元素，td中设置 vertical-align自动对齐

• 父元素大小可能会改变

.box{
width: 300px;
height: 200px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}

3、使用absolute