margin:auto為什么不垂直居中
margin:auto是具有強烈計算意味的關鍵字，用來計算元素對應方向上應該獲得的剩余空間大小，
行內元素margin:auto; 不能水平居中在一行的中央位置（行內元素不獨占一行），
position定位屬性大家都不會陌生，添加position屬性的元素可以定位，而top，left，right，
bottom屬性決定元素定位后所在的位置，而在使用定位屬性需要注意兩點：
1.top，left, right, bottom 此類定位屬性只對添加了position屬性且值為非static的元素生效，即值為fixed，absolute，relative 其一，
2.在使用top，left，right與bottom屬性時一般只設定兩個屬性進行定位，比如常見的top與left為一對，設定了top一般不會再設定bottom，
通過設定top，left四屬性為0居中元素的做法有個前置條件，就是需要居中的盒子必須有固定的寬高(px)，否則會失效，這就像四個方向有相同的力在拉這個盒子，配上margin:auto讓這個盒子的位置保持中立，來達到盒子處于正中心的目的，
.div1{
height:100px;
widyh:100px;
background-color:blue;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
<div ><div/>
left:0;right:0;top:0;bottom:0;再加上margin：auto，會使div1居中，如果div1,沒有寬高，則會繼承父集的寬高，適合body 內的遮罩
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501389.html
標籤：其他
下一篇：JS-初識js