CSS常用垂直居中方式

在网页布局中，我们有很多种方法可以做到元素的垂直居中，那么今天就来总结一下常用的一些方法吧

基础HTML标签

<div class="father">
        <div class="son">
            1234
        </div>
</div>

基础CSS样式

.father{
            width: 1000px;
            height: 800px;
            background-color: aqua;
        }
.son{
background-color:blue;
}

宽高可知可不知(三种)

1. flex布局

.father{
	display: flex;
	justify-content: center;
	align-items: center
}

2. 定位(position)+位移(translate)

.father{
	position: relative;
}
.son{
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}

3. grid布局(兼容性一般)

.father{
	display: grid;
}
.son{
	align-self: center;
	justify-self: center;
}

宽高已定或已知(三种)

1. 定位(position)+外边距(margin)

.father{
	position: relative;
}
.son{
	position: absolute;
	top: 50%;
	left: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}

2. 定位(position)+外边距(margin)

.father{
	position: relative;
}
.son{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

3. 定位(position)+calc方式

.father{
	postion: relative;
}
.son{
	top: calc(50% - 50px);
	left: calc(50% - 50px);
}

必须不定宽高

table方式

.father{
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}