摘要: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 來模擬成一個表格單元格,這樣就可以利用表格很方便的居中特性了
? ?
使用絕對定位來進行居中
此法只適用于那些我們已經知道它們的寬度或高度的元素。
絕對定位進行居中的原理是通過把絕對定位元素的left屬性設為50%,此時元素并不居中,而是比向右偏了這個元素寬度的一半,需要使用一個負的margin-left把它拉回到居中的位置,這個負的margin值就取元素寬度的一半
使用這個方法的好處在于無論你是什么形式的內容都可以馬上居中,而缺點就是必須對元素有確定的寬高值,否則的話可能就需要通過javascript來進行一些小計算了