熟悉水平居中和垂直居中的方法, 不為別的, 就為用的時候能夠信手拈來. 下面直接步入正題.
原文：16種方法實現水平居中垂直居中
1) 若是行內元素, 給其父元素設定 text-align:center,即可實現行內元素水平居中.
2) 若是塊級元素, 該元素設定 margin:0 auto即可.
3) 若子元素包含 float:left 屬性, 為了讓子元素水平居中, 則可讓父元素寬度設定為fit-content,並且配合margin, 作如下設定:
.parent4) 使用flex 2023年版本布局, 可以輕鬆的實現水平居中, 子元素設定如下:
.son.parent.son.son.son1) 若元素是單行文字, 則可設定 line-height 等於父元素高度
行內塊級元素
2) 若元素是行內塊級元素, 基本思想是使用display: inline-block, vertical-align: middle和乙個偽元素讓內容塊處於容器**.
.parent
::after, .son
.parent
::after
元素高度不定
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新增屬性, 設計初衷是為了解決像垂直居中這樣的常見布局問題. 相關的文章如《彈性盒模型flex指南》
父元素做如下設定即可保證子元素垂直居中:
.parent缺點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; 足矣
垂直居中, 共提供了8種方法.
我們發現, flex, 盒模型, transform, 絕對定位, 這幾種方法同時適用於水平居中和垂直居中.
希望對大家有所幫助.
原文：
css實現水平居中 垂直居中 垂直水平居中布局
1.只需要把行內元素包裹在乙個屬性display為block的父層元素中，並為父層元素新增如下屬性即可 parent2.塊狀元素解決方案 item3.多個塊狀元素解決方案將元素的display屬性設定為inline block，並且把父元素的text align屬性設定為center即可 paren...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...