HTML中元素水平垂直居中的方法

2021-10-03 19:28:51 字數 639 閱讀 5626

當元素的display屬性是inline 或inline-block (行內元素或行內塊元素)的時候,將父元素(容器)設定text-align: center; 就可水平居中。

當元素的display 屬性是block (塊元素)的時候,將元素本身的margin-left 和 margin-right 設定為 auto,即可水平居中。

例: margin:100px auto;(上邊距100px,左右水平居中)

方法一:使用定位

#son

方法二:使用flexbox(彈性盒布局)

body

注:移動端或不考慮相容性問題的pc端可使用flex布局

方法三:display table

原理:html的table元素有乙個valign 的屬性是用來設定垂直方向對齊,

將元素的display 屬性設定為table ,把它當做乙個table顯示。

body

.cell

注:

方法一是將元素自己定位到畫面中間,只需要調整元素自身的屬性即可;

方法二和三是先將容器調整到與畫面相同的大小,再設定它內容的對齊方式。

HTML 元素水平垂直居中

方案一 div絕對定位水平垂直居中 margin auto實現絕對定位元素的居中 相容性 ie7及之前版本不支援 div方案二 div絕對定位水平垂直居中 margin 負間距 這或許是當前最流行的使用方法。div方案三 div絕對定位水平垂直居中 transforms 變形 相容性 ie8不支援 ...

前端頁面中元素的水平垂直居中對齊

這是最簡單的,直接在元素屬性中使用text align center 讓文字水平居中,再通過行高 line height 元素的高度 讓文字垂直居中對齊 html布局 css樣式 效果展示 注意點 text align是對塊元素的特質,內部必須是行內元素等,如果裡面div也想水平居中,可以設定dis...

元素水平垂直居中

lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行,支援ie8 block1 block1 before center1 不...