简介
这一部分主要介绍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布局即可,方便简单。