CSS中垂直居中的方法

CSS中垂直居中的方法

1. margin：auto；方法

   CSS：

   div{
   	width: 800px;
   	height: 800px;
   	position: relative;
   	background: skyblue;
   	border: 0.5px black solid;
   }
   img{
   	position: absolute;
   	margin: auto;
   	top: 0;
   	left: 0;
   	right: 0;
   	bottom: 0;
   }
   

   HTML：

   <div id="">
   	<img src="../img/jishu.png" >
   </div>
   

   ​ 定位上下左右为0，margin：0；可以实现脱离文档流中的居中 。
   网页显示如下：

2. table-cell（未脱离文档流的）

   CSS：

   div{
   	width: 800px;
   	height: 800px;
   	background: blue;
   	border: 0.5px black solid;
   	display: table-cell;
   	vertical-align: middle;
   	text-align: center;
   }
   img{
   	vertical-align: middle;
   }
   

   HTML：

   <div id="">
   	<img src="../img/jishu.png" >
   </div>
   

   ​ 设置父元素display: table-cell;，并且vertical-align: middle;，这样子元素可以实现垂直居中。
   网页显示如下：
   

   3.利用flex

   ​ 将父元素设置为display: flex;，并且设置align-items: center;和justify-content: center;。可实现子元素的垂直居中。

   ​ CSS：

   div{
   	width: 800px;
   	height: 800px;
   	background: grey;
   	border: 0.5px black solid;
   	/* display: -webkit-flex; */
   	display: flex;
   	/* -webkit-align-items: center; */
   	align-items: center;
   	/* -webkit-justify-content: center; */
   	justify-content: center;
   	}
   

   HTML：

   <div id="">
   			<img src="../img/jishu.png" >
   </div>
   

网页显示如下：