1、開啟定位後
水平布局
left+margin-left+border-left+padding-left+width+padding-right+
border-right+margin-right+right = 包含快的內容區的寬度
當我們開啟了絕對定位後
-水平方向的布局等式需要新增left 和 right兩值
此時規則和之前一樣只是多新增了兩個值，
當發生過度約束：
如果 9 個值中沒有 auto ,則自動調整right 以使等式滿足
如果有auto,則自動調整 auto的值以使等式滿足
- 可設定 auto的值
margin ，width， left， right
因為 left 和 right 的值預設是auto ,所以如果不知道left 和right
則等式不滿足時，會自動調整這兩個值
2、垂直方向布局的等式也必須要滿足
top+marign-top/bottom+padding-top/bottom+border-top/bottom=
包含塊內容區的高度
3.通過絕對定位以及相對定位實現元素在包含快內水平垂直居中
在祖先元素中開啟絕對定位
在後代元素中開啟相對定位
設定 margin:auto
left:0
right:0
top:0
bottom:0
// 垂直居中,絕對定位後
// top、bottom設定為0，margin-top、margin-bottom設定為auto
.box2
// 水平居中，設定絕對定位，left\right設定為0
// margin-left、margin-right設定為auto
.box2{
width:100px;
height:100px;
background-color:orange;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto
絕對定位元素的居中實現
如果要問如何css實現絕對定位元素的居中效果，很多人心裡已經有答案了。相容性不錯的主流用法是 element 但，這種方法有乙個很明顯的不足，就是需要提前知道元素的尺寸。否則margin負值的調整無法精確。此時，往往要借助js獲得。css3的興起，使得有了更好的解決方法，就是使用transform代...
絕對定位元素的水平垂直居中
1.負邊距實現絕對定位元素的居中 1 head 2 style type text css 3.container 9.box 19style 20head 21 body 22 div class container 23 div class box 24div 25div 26body 優點 相...
css 絕對定位元素水平垂直居中
position absolute top 0 left 0 right 0 bottom 0 margin auto 設定margin auto 設定left和right的值相等,top和bottom的值相等,注意 left和right的值不能超過其相對元素width減去它自身width的一半,否...