下面是几种常见的水平垂直居中方式,可在不同情形下方便采用不同的方式
html
<body>
<div class="box">
<div class="content"></div>
</div>
</body>
共同的css
.content{
width: 50%;
height: 50%;
margin: 0 auto;
background-color: tomato;
}
1.最简单的margin:auto水平居中
这里box里的overflow:hidden的作用及具体原因见 http://blog.csdn.net/oiu1010110/article/details/53192048
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
overflow: hidden;/*这里是简单的防止边界叠加,若不加,box的margin-top将变成70px*/
/*padding-top: 1px;*/
/*border: 1px solid transparent;*/
/*float: left;*/
}
.content{
width: 50%;
height: 50%;
margin: 70px auto;
background-color: tomato;
}
2.absolute+margin 水平垂直居中
.box {
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
position: relative;
}
.content{
width: 80%;/*宽高可以随便变*/
height: 80%;
margin: auto; /*水平居中*/
position: absolute;/*垂直居中*/
left: 0;
right: 0;
bottom: 0;
top: 0;
background-color: tomato;
}
3. left:50%+top:50% margin为自己宽高的一半 垂直水平居中
情况1:
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
overflow: hidden;/*同1中的,这种情况下不可以省*/
/*padding-top: 1px;*/
/*border: 1px solid transparent;*/
/*float: left;*/
}
.content{
position: relative;
width:200px;
height:100px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -50px;
background-color: tomato;
}
或
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
overflow: hidden;
/*padding-top: 1px;*/
/*border: 1px solid transparent;*/
/*float: left;*/
}
/*margin-top 这里有两个坑:
1.百分比表示的时候参照的是父元素的宽;
2.当一个元素包含在另一个元素中时(假设没有填充或边框将边界分隔开),它们的顶和/或底边界会发生叠加
3.只有普通文档流中块框的垂直边界才会发生边界叠加。行内框、浮动框或绝对定位框之间的边界不会叠加。*/
.content {
width: 50%;
height: 50%; /*参照 父元素的height*/
margin-top: -25%;/*参照 父元素的width*/
margin-left: -25%;
position: relative;
top: 50%;
left: 50%;
background-color: tomato;
}
情况2:
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
position: relative;
}
.content {
position: absolute;
width:200px;
height:100px;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -50px;
background-color: tomato;
}
4.absolute与translate 垂直水平居中
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
position: relative;
}
.content {
width: 50%;
height: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: tomato;
}
5.display:flex 垂直水平居中
.box{
width: 400px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
display: flex;
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
.content {
width: 50%;
height: 50%;
background-color: tomato;
}
6.line-height+height 垂直水平居中
<body>
<div class="content">我要垂直水平居住</div>
</body>
div,body{
padding: 0;
margin: 0;
}
body{
background-color: darkgrey;
}
.content{
width: 200px;
height: 200px;
margin: 50px auto;
background-color: palegreen;
text-align: center;
line-height: 200px;
vertical-align: middle;
}
注意:用line-height等于height垂直居中 只能用固定的px ,不可以用百分比,因为line-height参照的自身字体的大小,而不是height
效果图:
7.display:flex 嵌套使用垂直水平居中
<body>
<div class="box">
<div class="content">我要垂直居中</div>
</div>
</body>
div,body{
padding: 0;
margin: 0;
}
body{
background-color: darkgrey;
}
.box{
width: 600px;
height: 400px;
margin: 50px auto;
background-color: palegreen;
display: flex;/*这里用了css3的flex新特性垂直水平居中*/
justify-content: center;/*水平居中*/
align-items: center;/*垂直居中*/
}
.content {
width: 50%;
height: 20%;
display: flex;/*嵌套使用flex*/
justify-content: center;
align-items: center;
background-color: tomato;
}
效果图:
说明:红色块在绿色块中居中,红色块中的文字垂直水平居中