利用絕對位置與margin實現元素置中

標籤：

例：

要讓一個width：100px ; height: 100px;的div，相對body置中。

div{ width:100px; height:100px; border: 1px solid black; box-sizing: border-box; 

position:absolute; top: 50%; left: 50%; margin-top: -50px; margin-left: -50px;}

 

 

因為絕對位置是相對於父級進行的定位，而margin是相對於自身進行定位。

所以，先對div絕對位置，相對於父級，距左50%，距右50%。使div錨點相對父級置中。

再設定margin-top, left,為，負的自身height，width的50%，因margin是相對自身原本位置進行定位，所以，

最終結果為div的中點，相對於其父級，置中。達到我們想要的結果

利用絕對位置與margin實現元素置中