总结:https://mp.weixin.qq.com/s/jkTiZdS7wE-Xwv3A3RKwAg
水平居中--------:
1. inline-block (子) + text-align (父)(推荐)
缺点:child里的文字也会水平居中,可以在.child添加text-align:left;
<div class="parent">
<div class="child>DEMO</div>
</div>
.child{
display:inline-block;
}
.parent{
text-align:center;
}
2. table(子) + margin(子) (原理:先将子框设置为块级表格来显示(类似 ),再设置子框居中以达到水平居中)
缺点:不支持ie6、ie7,将div换成table
<div class="parent">
<div class="child>DEMO</div>
</div>
.child {
display:table;
margin:0 auto;
}
3. absolute (子) + transform(子)(推荐)
缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
transform:translateX(-50%);
}
4.flex (父) (display:flex) + margin(子)(margin:0 auto)
缺点:不支持ie6、ie7, ie8 适合手机端
5. flex (父) (display:flex) + justify-content(父)(justify-content:center)
缺点:不支持ie6、ie7, ie8 适合手机端
垂直居中---------:
1. table-cell (父) + vertical-align (父) (推荐) 兼容性较好,ie8以上均支持
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
display:table-cell;
vertical-align:middle;
}
2. absolute (子) + transform(子)(推荐)
缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
top:50%;
transform:translateY(-50%);
}
3. flex (父) + align-items (父) 适合手机端
缺点:兼容性存在一定问题
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:flex;
align-items:center;
}
水平垂直居中---------:
1. absolute (子) + transform(子)(推荐)
缺点:transform属于css3内容,兼容性存在一定问题,高版本浏览器需要添加一些前缀
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
position:relative;
}
.child {
position:absolute;
left:50%;
top:50%;
transform:tranplate(-50%,-50%);
}
2.
inline-block (子) + text-align(父) +table-cell(父) + vertical-align(父) (推荐) 兼容性较好
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
text-align:center;
display:table-cell;
vertical-align:middle;
}
.child {
display:inline-block;
}
3.
flex(父)+ justify-content(父) + align-items(父) 适合手机端
<div class="parent">
<div class="child>DEMO</div>
</div>
.parent {
display:flex;
justify-content:center;
align-items:center;
}