若是行內元素, 給其父元素設定text-align:center,即可實現行內元素水平居中.
若是塊級元素, 該元素設定margin:0 auto即可.
若子元素包含float:left屬性, 為了讓子元素水平居中, 則可讓父元素寬度設定為fit-content,並且配合margin, 作如下設定:
.parent
使用flex 2023年版本布局, 可以輕鬆的實現水平居中, 子元素設定如下:
.son
display: box;``````box-pack: center;如下設定:
.parent
transform屬性, 子元素設定如下:
.son
margin-left, 子元素設定如下:
.son
left:0,right:0,margin:0 auto; 子元素設定如下:
.son
若元素是單行文字, 則可設定line-height等於父元素高度
行內塊級元素
若元素是行內塊級元素, 基本思想是使用display: inline-block,vertical-align: middle和乙個偽元素讓內容塊處於容器**.
.parent::after, .son
.parent::after
元素高度不定
可用vertical-align屬性, 而vertical-align只有在父層為td或者th時, 才會生效, 對於其他塊級元素, 例如div、p等, 預設情況是不支援的. 為了使用vertical-align, 我們需要設定父元素display:table, 子元素display:table-cell;vertical-align:middle;
優點元素高度可以動態改變, 不需再css中定義, 如果父元素沒有足夠空間時, 該元素內容也不會被截斷.
缺點ie6~7, 甚至ie8 beta中無效.
可用 flex 2012版, 這是css布局未來的趨勢. flexbox是css3新增屬性, 設計初衷是為了解決像垂直居中這樣的常見布局問題.
父元素做如下設定即可保證子元素垂直居中:
.parent
.parent
transform, 設定父元素相對定位(position:relative), 子元素如下css樣式:
.son
position:relative), 子元素如下css樣式:
.son
position:relative), 子元素如下css樣式:
.son
text-align:center,marin:0 auto; 足矣
① text-align:center;
② margin:0 auto;
③ width:fit-content;
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 兩種不同的絕對定位方法
① 單行文字, line-height
② 行內塊級元素, 使用 display: inline-block, vertical-align: middle; 加上偽元素輔助實現
③ vertical-align
④ flex
⑤ 盒模型
⑥ transform
⑦ ⑧ 兩種不同的絕對定位方法
我們發現, flex, 盒模型, transform, 絕對定位, 這幾種方法同時適用於水平居中和垂直居中.希望對大家有所幫助.
16種水平居中垂直居中方法
1 若是行內元素,給其父元素設定 text align center,即可實現行內元素水平居中.2 若是塊級元素,該元素設定 margin 0 auto即可.3 若子元素包含 float left 屬性,為了讓子元素水平居中,則可讓父元素寬度設定為fit content,並且配合margin,作如下...
CSS垂直居中水平居中方法
center 剛在別人的部落格裡看到這種方法時真的覺得很奇葩，以下是大神的解釋 解釋 1 在普通內容流中，margin auto的效果等同於margin top 0 margin bottom 0。2 position absolute使絕對定位塊跳出了內容流，內容流中的其餘部分渲染時絕對定位部分不...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...