元素開啟了絕對定位:
水準布局：
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
垂直方向布局也必須滿足等式：
topt+margin-top+border-top+padding-top+height+padding-bottom+border-bottom++margin-bottom+bottom
=包含塊的高度
通過以上規則,可以實作使得子元素在父容器中居中顯示(水準方向和垂直方向)``
Demo:
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>絕對定位元素的位置</title>
<style>
.box1{
width:500px;
height:500px;
background-color:#bfa;
/* 父元素開啟相對定位 */
position: relative;
}
.box2{
width:100px;
height:100px;
background-color:orange;
/*設定水準居中顯示 */
/* margin-left:auto;
margin-right:auto; */
/* 設定垂直方向垂直居中顯示 */
/* margin-top:auto;
margin-bottom:auto; */
/* 設定水準方向和垂直方向居中顯示 */
margin: auto;
/* 開啟絕對定位 */
position: absolute;
/*
left和right的預設值為auto,是以如果不設定這兩個值
則等式不滿足時,會自動調整這兩個值(必須設定)
*/
/* (水準方向)将子元素置父元素左上角處 */
left:0;
right:0;
top:0;
bottom:0;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
</html>
![web前端布局練手項目[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)