水平垂直居中（五种常用方法）

1./*父元素设置relative*/ /*子元素设置absolute,上下左右位置都为0,margin：auto*/
   2./*父元素设置relative*/ /*子元素设置absolute, 上50%；左50%；margin-top:自己高度的一半;margin-left:自己宽度的一半；*/
   3./*父元素设置relative*/ /*子元素设置absolute,上50%，左50%，transform:translate(-50%,-50%)*/
   4./*父元素设置display:flex;justify-content:center;align-items:center*/ /*子元素定高定宽，放不下时，宽度会压缩*/
   5./*父元素设置display:table */ 子元素设置display:table-cell;vertical-align:middle;text-align:center;

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>水平垂直居中DIV</title>
	<link rel="stylesheet" href="">
</head>
<style>	
.out1{
	position: relative;/*父元素设置relative*/
	width: 1000px;
	height:250px;
	margin:0 auto;
	margin-top: 30px;
	border: 1px solid #000;
}
.middle1{
	width: 200px;
	height: 200px;
	background: red;
	position:absolute;/*子元素设置absolute*/
    left:0;/*上下左右位置都为0*/
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;/*margin：auto*/
}
/*----------------------------*/
.out2{
	position: relative;/*父元素设置relative*/

	width: 1000px;
	height:250px;
	margin:0 auto;
	margin-top: 30px;
	border: 1px solid #000;
}
.middle2{
	width: 200px;
	height: 200px;
	background: red;

	position:absolute;/*子元素设置absolute*/
    left:50%;/*上50%；左50%；margin-top:自己高度的一半;margin-left:自己宽度的一半；*/
    top: 50%;
    margin-left:-100px;
    margin-top: -100px;
}
/*----------------------------*/
.out3{
	position: relative;/*父元素设置relative*/

	width: 1000px;
	height:250px;
	margin:0 auto;
	margin-top: 30px;
	border: 1px solid #000;
}
.middle3{
	width: 200px;
	height: 200px;
	background: red;

	position:absolute;/*子元素设置absolute*/
    left:50%;/*上50%；左50%；transform: translate(-50%,-50%);*/
    top: 50%;
    transform: translate(-50%,-50%);
}
/*----------------------------*/
.out4{
	width: 1000px;
	height:250px;
	margin:0 auto;
	margin-top: 30px;
	border: 1px solid #000;
	
	display: flex;
	justify-content: center;
	align-items: center;
}
.middle4{
	width: 200px;
	height: 200px;
	margin:0 10px;
	background: red;	
}
/*----------------------------*/
.out5{
  display: table;/*父元素 display:table*/

  width: 1000px;
  height:250px;
  margin:0 auto;
  margin-top: 30px;
  border: 1px solid #000;
}
.middle5{ 
  display: table-cell;/*子元素设置 display: table-cell;text-align: center;vertical-align: middle;*/
  text-align: center;
  vertical-align: middle;

  width: 200px;
  height: 200px;
  padding: 10px;
}
.middle5 div{
	background: red;
	height: 180px;
}
</style>

<body>
	<div>方法一</div>
	<div class="out1">	
		<div class="middle1"></div>
	</div>

	<div>方法二</div>
	<div class="out2">
		<div class="middle2"></div>
	</div>

	<div>方法三</div>
	<div class="out3">
		<div class="middle3">IE8不支持</div>
	</div>

	<div>方法四</div>
	<div class="out4">
		<div class="middle4">flex</div>
		<div class="middle4">flex</div>
		<div class="middle4">flex</div>
	</div>

	<div>方法五</div>
	<div class="out5">
		<div class="middle5">
			<div>table-cell</div>
		</div>
		<div class="middle5">
			<div>table-cell</div>
		</div>
		<div class="middle5">
			<div>table-cell</div>
		</div>
		<div class="middle5">
			<div>table-cell</div>
		</div>
	</div>
</body>

<script>
	
	
	
</script>
</html>

原文链接：https://blog.csdn.net/qq_41909079/article/details/88974030