解讀 CSS 布局之水平垂直居中

摘要:flexbox是個很強大的布局模塊,三個屬性就搞定居中,而且不論父容器還是居中元素都可以不定寬高

水平居中

align="center"

直接在標簽對象內加align="center"即可讓對象內圖片橫向水平居中顯示

align="center"使用方法:

aaa

text-align:center

.divcss5{text-align:center}aaa

text-align是針對父元素進行設置,只能對圖片,按鈕,文字等行內元素(display為inline或inline-block等)起作用,起作用的首要條件是子元素必須沒有被float影響。但要說明的是在IE6、7這兩個奇葩的瀏覽器中,它是能對任何元素進行水平居中的

把margin設為auto

具體來說就是把要居中的元素的margin-left和margin-right都設為auto,此方法只能進行水平的居中,且對浮動元素或絕對定位元素無效

body{text-align:center}.div{margin:0auto;}aaa

使用display:table-cell來居中

表格中只要用到 td(或 th)元素的align="center"和valign="middle"這兩個屬性就可以完美處理,而且表格默認對它里面的內容進行垂直居中。在css中控制表格內容的居中可以使用vertical-align:middle,至于水平居中,css中沒有相對應的屬性的,但在IE6、7中可以用text-align:center對表格里的元素設置,IE8+及谷歌、火狐等的text-align:center只對行內元素起作用,對塊狀元素無效

對于不是表格的元素,可以通過display:table-cell 來模擬成一個表格單元格,這樣就可以利用表格很方便的居中特性了

? ?

aaa

使用絕對定位來進行居中

此法只適用于那些我們已經知道它們的寬度或高度的元素。

絕對定位進行居中的原理是通過把絕對定位元素的left屬性設為50%,此時元素并不居中,而是比向右偏了這個元素寬度的一半,需要使用一個負的margin-left把它拉回到居中的位置,這個負的margin值就取元素寬度的一半

使用這個方法的好處在于無論你是什么形式的內容都可以馬上居中,而缺點就是必須對元素有確定的寬高值,否則的話可能就需要通過javascript來進行一些小計算了

原文鏈接

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容