CSS 實現塊級元素垂直居中

2021-09-13 13:03:26 字數 902 閱讀 3136

如果是文字,我們可以使用line-height將其垂直居中。但如果是塊級元素,就不能這麼做了。儘管如此,我們還是有很多方法可以將乙個塊級元素垂直居中。

如果塊級元素高度和寬度已知,利用絕對定位和負邊距,就可以實現垂直居中。

class

="container"

>

class

="content"

>

lorem ipsum dolor sit amet, consectetur adipisicing elit. quae illum libero officiis, ratione culpa, doloribus in omnis perspiciatis. perspiciatis aliquam et ea deleniti, accusamus quas esse alias nemo ad. adipisci.

div>

div>

.container

.content

那如果高度未知呢?要知道可是有很多情況,需要居中的元素其高度是不定的,它根據其內容撐開。這個時候我們可以使用 css3 的 transform 屬性(html **如上不變)。

.container

.content

前面兩種方式都使用了絕對定位,有時候可能會有一些***。其實我們還有更簡單的方式,來實現塊級元素垂直居中,那就是 flex 布局。

.container

.content

塊級元素垂直居中問題

1.寬高固定 絕對定位 樣式 box aaa 當然,也可以將margin left 50px margin top 50px 換成 transform translate 50 50 html 2.寬高不固定 絕對定位 aaa 3.after偽類實現垂直居中對齊 樣式 demo demo after...

行內元素與塊級元素垂直居中

行內元素的垂直居中 1.給塊級元素中的想要居中的行內元素設定 vertical align middle 這表示這些行內元素是以它們各自的中間的位置來與其他行內元素對齊的 若還是沒對齊的話,可通過在這些行內元素的父元素中設定line height 來調節.2.若行內元素的父元素高度不定,可通過設定行...

CSS實現元素垂直居中

對元素的垂直居中針對於單行元素和多行元素將分情況討論。父元素高度確定的單行文字的豎直居中的方法是通過設定父元素的 height 和 line height 高度一致來實現的。html結構 hello world css樣式 對於父元素高度不確定的文字 等的塊級元素的豎直居中可以設定相同的上下內邊距 ...