如何透過css的絕對定位和固定定位來實現HTML元素的居中？

很多人試圖透過CSS將模式框這樣的元素居中在頁面的中心，但是都沒有成功，然後他們就會用JS來完成。在這篇技巧性的文章中將為大家介紹如何在不使用JavaScript的情況下將元素居中，話不多數，讓我們來直接進入正文。

方法比較簡單，就是不只是使用一個包裝元素，而是使用兩個元素。 （推薦課程：css影片教學）

HTML：

<div class="popup">
  <div class="wrapper">
       some content
    </div>
</div>

CSS：

.popup{
   position:fixed;
 left:50%;  
}

此CSS將元素左側居中到視窗的中心，但是我們希望模式框根據元素的中間位置居中。

現在我們來看看技巧性的方法，因為我們對彈出視窗有兩個包裝器，所以我們可以操縱內部div，並告訴div向左移動-50%的相對值，並且因為它在容器中，div將只向左移動一半的大小。那就是我們如何將模態框集中在一起的方法。

加入CSS

.popup .wrapper{
  position:relative; 
  left:-50%;
}

然後我們的元素就放在了水平中心，就實現了元素的居中。

這篇文章到這裡就全部結束了，更多精彩內容大家可以關注PHP中文網的影片教學專欄！ ！ ！

以上是如何透過css的絕對定位和固定定位來實現HTML元素的居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！