前端问题面试问题：css水平、垂直居中的写法

1. flex布局

   <div class="p">
   	<h2 class="title">felx布局</h2>
   	<div class="content con1">
   		<div class="con"></div>
   	</div>
   </div>
   

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

2. table布局

   <div class="p">
   	<h2 class="title">table布局</h2>
   	<div class="content con2">
   		<div class="con"></div>
   	</div>
   </div>
   

   .con2 {
   	display: table-cell;
   	text-align: center;
   	vertical-align: middle;
   	
   	.con {
   		display: inline-block;
   	}
   }
   

3. 相对定位+绝对定位1 子元素使用margin:auto

   <div class="p">
   	<h2 class="title">相对定位+绝对定位1</h2>
   	<div class="content con3">
   		<div class="con"></div>
   	</div>
   </div>
   

   .con3 {
   	position: relative;
   
   	.con {
   		position: absolute;
   		left: 0;
   		right: 0;
   		bottom: 0;
   		top: 0;
   		margin: auto;
   	}
   }
   

4. 相对定位+绝对定位2 margin-left、margin-right

   <div class="p">
   	<h2 class="title">相对定位+绝对定位2</h2>
   	<div class="content con4">
   		<div class="con"></div>
   	</div>
   </div>
   

   .con4 {
   	position: relative;
   
   	.con {
   		position: absolute;
   		top: 50%;
   		left: 50%;
   		margin-left: -25px;
   		margin-top: -25px;
   	}
   }
   

5. 相对定位+绝对定位3 transform

   <div class="p">
   	<h2 class="title">相对定位+绝对定位3</h2>
   	<div class="content con5">
   		<div class="con"></div>
   	</div>
   </div>
   

   .con5 {
   	position: relative;
   	.con {
   		position: absolute;
   		top: 50%;
   		left: 50%;
   		-webkit-transform: translate(-50%, -50%);
   		-ms-transform: translate(-50%, -50%);
   		-o-transform: translate(-50%, -50%);
   		transform: translate(-50%, -50%);
   	}
   }
   

如有错误请予以纠正