16種水平居中垂直居中方法

2021-09-13 13:08:00 字數 2743 閱讀 3695

1) 若是行內元素, 給其父元素設定 text-align:center,即可實現行內元素水平居中.

2) 若是塊級元素, 該元素設定 margin:0 auto即可.

3) 若子元素包含 float:left 屬性, 為了讓子元素水平居中, 則可讓父元素寬度設定為fit-content,並且配合margin, 作如下設定:

.parent
fit-content是css3中給width屬性新加的乙個屬性值,它配合margin可以輕鬆實現水平居中, 目前只支援chrome 和 firefox瀏覽器.

4) 使用flex 2023年版本布局, 可以輕鬆的實現水平居中, 子元素設定如下:

.son
5) 使用flex 2023年版本, 父元素display: box;box-pack: center;如下設定:

.parent
6) 使用css3中新增的transform屬性, 子元素設定如下:

.son
7) 使用絕對定位方式, 以及負值的margin-left, 子元素設定如下:

.son
8) 使用絕對定位方式, 以及left:0;right:0;margin:0 auto; 子元素設定如下:

.son
單行文字

1) 若元素是單行文字, 則可設定 line-height 等於父元素高度

行內塊級元素

2) 若元素是行內塊級元素, 基本思想是使用display: inline-block, vertical-align: middle和乙個偽元素讓內容塊處於容器**.

.parent::after, .son

.parent::after

這是一種很流行的方法, 也適應ie7.

元素高度不定

3) 可用 vertical-align 屬性, 而vertical-align只有在父層為 td 或者 th 時, 才會生效, 對於其他塊級元素, 例如 div、p 等, 預設情況是不支援的. 為了使用vertical-align, 我們需要設定父元素display:table, 子元素 display:table-cell;vertical-align:middle;

優點元素高度可以動態改變, 不需再css中定義, 如果父元素沒有足夠空間時, 該元素內容也不會被截斷.

缺點ie6~7, 甚至ie8 beta中無效.

4) 可用 flex 2012版, 這是css布局未來的趨勢. flexbox是css3新增屬性, 設計初衷是為了解決像垂直居中這樣的常見布局問題.

父元素做如下設定即可保證子元素垂直居中:

.parent
優點

內容塊的寬高任意, 優雅的溢位.

可用於更複雜高階的布局技術中.

缺點

ie8/ie9不支援

需要瀏覽器廠商字首

渲染上可能會有一些問題

5) 使用flex 2009版.

.parent
優點

實現簡單, 擴充套件性強

缺點

相容性差, 不支援ie

6) 可用 transform , 設定父元素相對定位(position:relative), 子元素如下css樣式:

.son
優點

**量少

缺點

ie8不支援, 屬性需要追加瀏覽器廠商字首, 可能干擾其他 transform 效果, 某些情形下會出現文字或元素邊界渲染模糊的現象.

元素高度固定

7) 設定父元素相對定位(position:relative), 子元素如下css樣式:

.son
優點

適用於所有瀏覽器.

缺點

父元素空間不夠時, 子元素可能不可見(當瀏覽器視窗縮小時,滾動條不出現時).如果子元素設定了overflow:auto, 則高度不夠時, 會出現滾動條.

8) 設定父元素相對定位(position:relative), 子元素如下css樣式:

.son
簡單

缺點

沒有足夠空間時, 子元素會被截斷, 但不會有滾動條.

總結

水平居中較為簡單, 共提供了8種方法, 一般情況下 text-align:center,marin:0 auto; 足矣

① text-align:center;

② margin:0 auto;

③ width:fit-content;

④ flex

⑤ 盒模型

⑥ transform

⑦ ⑧ 兩種不同的絕對定位方法

垂直居中, 共提供了8種方法.

我們發現, flex, 盒模型, transform, 絕對定位, 這幾種方法同時適用於水平居中和垂直居中.

希望對大家有所幫助.

CSS 16種水平居中垂直居中方法

若是行內元素,給其父元素設定text align center,即可實現行內元素水平居中.若是塊級元素,該元素設定margin 0 auto即可.若子元素包含float left屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下設定 parent ...

CSS垂直居中水平居中方法

center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩,以下是大神的解釋 解釋 1 在普通內容流中,margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流,內容流中的其餘部分渲染時絕對定位部分不...

16種方法實現水平居中垂直居中

1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...