CSS设置垂直居中的方法

1.利用定位和transform的translate属性，元素的宽度和高度可不固定（认为是最实用的一种方法）

html:

<div class="box">
    <div class="box1"></div>
</div>

css:

.box{width:200px;height: 100px;border: 1px solid #000;position: relative;}
.box1{width: 100px;height: 50px;border: 1px solid #ccc;transform:translate(-50%,-50%);position: absolute;left: 50%;top: 50%;}

 效果如下：

因为transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。所以能达到垂直居中的目的

2.利用定位和margin-left,margin-top来实现元素的垂直居中

html:

<div class="box">
		<div class="box2">
			我是box2
		</div>
</div>

css:

.box{width:200px;height: 100px;border: 1px solid #000;position: relative;}
.box2{width: 100px;height: 50px;border: 1px solid #ccc;position: absolute;left: 50%;top: 50%;margin-left: -50px;margin-top: -25px;}

效果图如下

这个是必须确定内部元素的宽高才能进行垂直居中的css

3.也是利用position和margin，元素的宽度和高度可不固定

html:

<div class="box">
		<div class="box3">
			我是box3
		</div>
</div>

css:

.box{width:200px;height: 100px;border: 1px solid #000;position: relative;}
.box3{width: 100px;height: 50px;border: 1px solid #ccc;position:absolute;left: 0;top: 0;right: 0;bottom: 0;margin:auto;}

效果图如下

这个是利用绝对定位的left top right bottom都为0，margin设为auto

4.利用父元素display:flex;align-items:center，则内部元素则可以垂直居中（这个也可以不用考虑元素的宽高)

html:

<div class="box">
		<div class="box4">
			我是box4
		</div>
</div>

css:

.box{width:200px;height: 100px;border: 1px solid #000;display: flex;align-items:center;}
.box4{width: 100px;height: 50px;border:1px solid #000;margin: 0 auto;}

效果图：

5.利用弹性布局的display: flex;flex-direction: column;justify-content: center;

html：

<div class="box">
		<div class="box5">
			我是box5
		</div>
</div>

css:

.box{width:200px;height: 100px;border: 1px solid #000;display: flex;flex-direction: column;justify-content: center;}
.box5{width: 100px;height: 50px;border:1px solid #ccc;margin: 0 auto;}

效果图如下：

这5种是比较实用的