CSS开启绝对定位后实现居中
1.在元素有width的情况下
1.1CSS方法:
#xx{
width:300px;
posibiton:absolute;
left:50%;
<!-- 即元素的一半 -->
margin-left:-150px;
};
1.2Auto方法
#xx{
width:300px;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
<!-- auto实现居中 -->
margin:auto;
};
2.在元素没有明显width的情况下(获取由子元素撑开的情况下),都适用
1.1CSS3方法transform
#xx{
<!-- width:300px -->
position:absolute;
left:50%;
transform:translate(-50%);
};
3.使用弹性盒子居中的方法(不考虑浏览器兼容)
1.1justify-content水平居中+align-items垂直居中
#xx{
width:300px;
display:flex;
justify-content:center;
align-items:center;
}
参考地址:
http://www.divcss5.com/css3-style/c57059.shtml
https://blog.csdn.net/variinjson/article/details/52816515