元素垂直居中和水平居中

2021-09-23 06:15:13 字數 328 閱讀 5624

在此之前先要設定好高度和寬度

要是單行資料

垂直居中

1、可以用傳統的line-height和height相等就可以

2、使用vertical-align:middle ,此時該元素的display要設定為table-cell,並且子元素必須是行級元素才可以。

水平居中

1、text-align:center,此時子元素也得是行級元素

要是多行資料

建議用flex布局

垂直居中

align-items:center

水平居中

justify-content:center

水平居中和垂直居中

行內元素 為該行內元素的父元素新增設定text align center 塊級元素 為其自身設定margin auto樣式 子元素是行內元素 設定父元素的line height為其自身盒子的高度 子元素是塊級元素但子元素高度沒有設定 設定父元素是 display table cell vertica...

元素水平居中和垂直居中的方式

關於居中的問題,一直處於疑惑不解的狀態,知道的幾種方法好像也不是每一次都會起到作用,所以更加迷惑。主要是不清楚該 在什麼情況下採用哪種解決方法,所以,整理了一些方法,梳理一下思路,做乙個總結。對於單行文字,可以設定它的行高等於它父容器的高度,這樣就實現了該文字的垂直居中,但是此方法只適用於單行文字。...

垂直居中和水平居中總結

container center 以上 可使塊級子元素水平垂直居中,為inline block的子元素只能垂直居中,若也想其水平垂直居中確保在父元素樣式中新增 text align center。關鍵必須設定其父元素固定寬高。即使有多個子元素也一樣可以垂直水平居中。當子元素都為行內元素 行內元素不能...