CSS開啟絕對定位后實(shí)現(xiàn)居中
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實(shí)現(xiàn)居中 -->
? ? ? ? ? ? margin:auto;
? ? ? ? ? ? };
2.在元素沒有明顯width的情況下(獲取由子元素?fù)伍_的情況下)冗酿，都適用
? ? 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
