垂直居中的方法

Posted 2022-12-29 psxiao

（1）margin:auto法

 

css:
div
width: 400px;
height: 400px;
position: relative;
border: 1px solid #465468;

img
position: absolute;
margin: auto;//如果此处是让一个div居中，记得要设置div的高度和宽度，才能居中显示
top: 0;
left: 0;
right: 0;
bottom: 0;

html:
<div>
<img src="mm.jpg">
</div>

 

定位为上下左右为0，margin：0可以实现脱离文档流的居中。

（2）margin负值法

.container
width: 500px;
height: 400px;
border: 2px solid #379;
position: relative;

.inner
width: 480px;
height: 380px;
background-color: #746;
position: absolute;
top: 50%;
left: 50%;

margin-top: -190px; /*height的一半*/

margin-left: -240px; /*width的一半*/

 

补充：其实这里也可以将margin-top和margin-left负值替换成：

ransform：translateX(-50%)和transform：translateY(-50%)

（3）table-cell(未脱离文档流的)

设置父元素的display:table-cell,并且vertical-align:middle，这样子元素可以实现垂直居中。

 

css:
div
width: 300px;
height: 300px;
border: 3px solid #555;
display: table-cell;
vertical-align: middle;
text-align: center;

img
vertical-align: middle;

 

（4）利用flex（css不定高度宽度）

将父元素设置为display：flex，并且设置align-items:center;justify-content:center;

css:
.container
width: 300px;
height: 200px;
border: 3px solid #546461;
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

.inner
border: 3px solid #458761;
padding: 20px;

 

更详细可以查看：https://www.cnblogs.com/Julia-Yuan/p/6648816.html