CSS居中（一）--div盒子水平垂直居中

简介

这一部分主要介绍div盒子的水平垂直居中，一种移动端两种PC端以及最方便的flex布局实现。

预览

看效果图，如下：

HTML

<--统一的html结构-->
<div class="wrap">
	<div class="center"></div>
</div>

CSS实现

/*PC端，方式一：margin+position（不兼容IE6）*/
.wrap {
	width: 200px;
	height: 200px;
	background: #00FF00;
	position: relative;
}

.wrap .center {
	width: 100px;
	height: 100px;
	background: #00FFFF;
	/*关键点如下*/
	margin: auto;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
}

/*PC端，方式二：position+margin（兼容所有浏览器）*/
.wrap {
    width: 200px;
    height: 200px;
    background: #00FF00;
    position: relative;
}
.center {
    background: #00FFFF;
    position: absolute;
    width: 100px;
    height: 100px;
    /*关键点如下*/
    left: 50%;
    top: 50%;
	margin-left:-50px;/*对应中间盒子宽度的一半*/
	margin-top:-50px;/*对应中间盒子高度的一半*/
}

/*移动端，flex+margin*/
.wrap {
    background: #0f0;
    width: 200px;
    height: 200px;
    display: flex; /*属性1*/
}

.center {
    background: #0ff;
    width: 100px;
    height: 100px;
    margin: auto;/*属性2*/
}

/* 都能用的flex布局实现 */
.wrap {
	display: flex;
	justify-content: center;
    align-items: center;
}

两种PC端写法，包括兼容ie6的，一种移动端推荐写法，以及都能用的flex布局。

总结

其实直接用flex布局都可以了，博主之前写的那些玩意都是几年前初学的时候总结的，现在回头看，用flex布局即可，方便简单。