css實現div垂直水平居中的2種常用方法

2021-09-24 02:55:30 字數 499 閱讀 2720

利用vertical-align:middle進行垂直方向上的居中對齊,此方法需要滿足的條件:

設定父元素的行高line-height等於父元素height的高度

子元素必須是行內塊級元素display:inline-block;

子元素設定vertical-align:middle

此方法在開發中不能右浮動(不能靠右邊)

下方是完整**,可以新建乙個html檔案進行測試(綠色的盒子):

這種方法比較暴力,利用定位解決:

父元素開啟相對定位

子元素絕對定位

子元素先向下移動父元素的50%,此時子元素的頂部與父元素的中線對齊了

子元素再向上移動自身高度"height"的一半,此時子元素的中線和父元素的中線對齊了

此方法可以右對齊,設定子元素right:0px;即可

css實現div水平 垂直居中

示例1 chrome33 ie8測試通過 示例2 chrome33 ie8測試通過 示例4 chrome33測試通過,ie8測試不通過,參考 注 對頁面中所有元素應用box sizing border box樣式是為了將padding margin值都計入width height中,即為元素指定的任...

Div實現水平垂直居中

在實際應用中很多地方不僅要求實現元素的水平居中或者垂直居中效果,還可能會在水平方向和垂直方向上都要實現居中效果,下面就簡單介紹幾種元素水平垂直居中的方法 注 不同的方法會存在一些優缺點以及相容性問題 hmtl結構 parent child 原理 元素設定定位並給定 50 的top值和left值,再通...

3行Css實現div水平 垂直居中

div 就像下面,只需要給.container三行css規則就可以使它在水平方向和垂直方向均處於居中。container 這個方法適用於所有現代瀏覽器 ie10 chrome瀏覽器,firefox和safari 與 webkit 字首 完整的相容性列表如下 height 450 width 600p...