CSS實現元素水平垂直居中的幾種方式

2021-10-05 19:29:22 字數 1174 閱讀 1041

<


!doctype html>


"en"


>


"utf-8"


>


"viewport" content=


"width=device-width, initial-scale=1.0"


>


document<


/title>


#box1,#box2 


.box1-


1.box2-


1<


/style>


<


/head>


"box1"


>


="box1-1"


>


<


/div>


<


/div>


"box2"


>


="box2-1"


>


<


/div>


<


/div>


<


/body>


<


/html>
在子元素上新增 margin: auto;我們可以發現子元素實現了水平居中，但在垂直方向還是無變化。

因此我們可以為父元素新增 grid 網格布局，使得margin支援上下左右的居中。

#box1,#box2 


.box1-1,


.box2-


1
使用彈性盒模型 flex,使得margin支援上下左右的居中。

#box1,#box2 


.box1-1,


.box2-


1
使用絕對定位，使得子元素脫離文件流。

通過設定左右，上下都為0，利用 margin: auto 居中兩邊等價的原理，實現最終的效果。

#box1,#box2 


.box1-1,


.box2-


1
使用父相子絕的定位方式，讓子元素距左，距頂偏移一半，此時子元素的左上角在父元素的中心點。

我們可以利用 css3的 transform屬性將子元素向左上方，x軸，y軸拉取50%。

#box1,#box2 


.box1-1,


.box2-


1

CSS實現元素水平居中 垂直居中 水平垂直居中

1.元素水平居中 1.1行內元素水平居中 1.2塊級元素水平居中 1.2.1定寬塊級元素的水平居中 1.2.2不定寬塊級元素水平居中 2.元素垂直居中 2.1 單行文字垂直居中 2.2 多行文字垂直居中 2.3塊級元素垂直居中 3.元素水平垂直居中 像文字text 影象img 按鈕等行內元素要實現水...

css實現元素水平垂直居中

利用負邊距實現子元素居中 相對于父元素 position relative 需已知子元素的width與height 且把子元素的position設為absolute，絕對定位 以及設定left和top為50 再加上負邊距，margin left值為width的一半，同樣的，margin top值為h...

css實現元素垂直水平居中

css實現垂直居中的方法 方法一 父元素display flex 子元素margin auto auto fa son 方法二 父元素display flex 並設定justify content center align items center fa son 方法三 在不改變父元素的前提下，只修...