首頁 > web前端 > css教學 > 主體

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

不言
發布: 2018-11-06 09:55:10
原創
2835 人瀏覽過

很多人試圖透過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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!