2019-08-06 CSS-css垂直居中的几种方式

第一种，position + margin，块级元素定宽高

// html
<div class="father">
	<div class="son">
		垂直居中
	</div>
</div>

// css
.father {
	width: 400px;
	height: 400px;
	position: relative;
	border: 1px solid red;
}
.son {
	width: 200px;
	height: 200px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -100px;
	margin-top: -100px;
}

第二种，position + transform，不定高宽度

// html
<div class="father">
	<div class="son">
		垂直居中
	</div>
</div>

// css
.father {
	width: 400px;
	height: 400px;
	position: relative;
	border: 1px solid red;
}
.son {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

第三种， position+top,left,right,bottom:0+margin:auto

// html
<div class="father">
	<div class="son">
		垂直居中
	</div>
</div>

// css
.father {
	width: 400px;
	height: 400px;
	position: relative;
	border: 1px solid red;
}
.son {
	position: absolute;
	width: 100px;
	height: 100px;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

第四种，flex弹性布局

// html
<div class="father">
	<div class="son">
		垂直居中
	</div>
</div>

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

第五种，display:table-cell+vertical-align:middle

// html
<div class="father">
	<div class="son">
		垂直居中
	</div>
</div>

.father {
   display: table-cell;
   text-align: center;
   vertical-align: middle;
   width: 500px;
   height: 400px;
   background-color: chartreuse;
 }
 .son {
   width: 100px;
   height: 100px;
   background-color: blue;
 }

以上就是自己常用的5种垂直居中的方法，还有其它在特定情况下的方法后续在整理，总结整理。