前端元素垂直水平居中的多個方法

建立乙個bfc，高度坍塌、居中、margin重合問題均可解決

1、 浮動元素float不為none

2、 絕對定位或固定定位：position:absolute/fixed

3、 行內元素：display:inline-block;

4、 overflow不為visible的塊級元素

5、 display值為flow-root、**單元素table-cell、**標題table-caption

6、 匿名**單元格元素

塊級元素

方法一：auto

注意：該元素不可浮動、絕對定位、固定定位

margin

: 0 auto;

position

:  relative / absolute / fixed;
left
:calc
(50% - 元素寬的一半px)
;    四則運算 
top:
calc
(50% - 元素高的一半px)
;		垂直居中

父級元素屬性

display
: flex;		彈性盒子
flex-direction
: row;		主軸方向為水平方向，起點在左端
justify-content
:center;

position

: absolute;
left
: 50%;
margin-left
: -元素的一半寬px; / transform
:translate
(-50%,0)
;							   2d變換中的屬性，延x軸移動自身的-50%

text-align

: center;
/* 父元素 */

行內元素：父級元素屬性，並且父級元素必須是塊元素

方法一（多行文字失效）：這個只表示某一行當中的垂直居中

line-height

:父元素的高;   將字型高度調整為div的高度
vertical-align
: bottom;			暫未理解，底部對齊

父元素相對定位relative，必須有固定高度，子元素絕對定位absolute

子元素屬性

top: 50%;
transform
:translate
(0,-50%)
; / calc
(50% - 一半高度) /margin-top
: -（一半高度）;

原理：交叉軸上的內容在軸上居中

父類屬性

display
: flex;
align-items
:center;
(垂直居中)

方法一：彈性盒子

display

: flex;
display
: -webkit-flex;
justify-content
: space-between;
align-items
: center;

父元素：display

:flex;
子元素：align-self
:center;

父元素

父元素relative

子元素

父元素::before

子元素

子元素

方法二：清除浮動 clear:both;

方法三：給父級元素固定寬高

方法四：給父元素新增overflow：hidden;

方法五：萬能清除法：after偽元素+清除浮動html部分

父元素::after

元素水平垂直居中

lang en charset utf 8 垂直居中示例title name viewport content width device width,initial scale 1 rel stylesheet href 可行，支援ie8 block1 block1 before center1 不...

元素水平垂直居中

給子元素設定以下內容 給父元素新增屬性 display flex align items center justify content center 先給元素設定絕對定位，再依次新增以下屬性，具體 如下所示。position absolute top 0 left 0 right 0 bottom ...

元素水平垂直居中

只可用於定寬高元素 doctype html html lang en head meta charset utf 8 title 垂直居中 title style type text css body parent container style head body div id parent d...