您的位置：首页 > Web前端 > CSS

css 水平垂直居中的几种常见方式

2016-11-17 12:16 731 查看

下面是几种常见的水平垂直居中方式，可在不同情形下方便采用不同的方式

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;
}

效果图：

说明：红色块在绿色块中居中，红色块中的文字垂直水平居中

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 垂直水平居中 css flex嵌套使用

相关文章推荐

新的分享

章节导航