您的位置：首页 > 其它

实现div水平、垂直居中的几种方法

2016-12-28 15:10 821 查看

1、最常用的，也是最简单的(利用position定位、再用margin偏移)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实现div水平垂直居中</title>
<style type="text/css">
body{
background: #272822;
}
.test{
position: absolute;
top:50%;
left:50%;
width: 100px;
height: 100px;
margin:-50px 0 0 -50px;
background: #27399a;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>

2、利用css3新增属性弹性盒子align-items和justify-content（会存在一些兼容性问题，没关系，以后肯定会兼容的）

这种方法还有一个好处：就算不给里层容器定义宽高，也会根据文本内容自动居中

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实现div水平垂直居中</title>
<style type="text/css">
.bg{
display: flex;
width:500px;
height: 500px;
margin:0 auto;
background: #272822;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}
.test{
/*width: 100px;
height: 100px;*/
background: #27399a;
color:#fff;
}
</style>
</head>
<body>

<div class="bg">
<div class="test">aaaaaaaaaaaaaa</div>
</div>

</body>
</html>

3、这里扩充一下flex的盒子布局

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>实现div水平垂直居中</title>
<style type="text/css">
.bg{
display: flex;
width:500px;
height: 500px;
margin:0 auto;
background: #272822;
-webkit-align-items: center;
align-items: center;
justify-content: center;
}

.test{
height: 100px;
background: #27399a;
margin-left: 10px;
}

.test:nth-child(1){
flex:1;
}
.test:nth-child(2){
flex:2;
background: #a6e22e;
}
.test:nth-child(3){
flex:1;
background: #48beef;
margin-right: 10px;
}

</style>
</head>
<body>

<div class="bg">
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
</div>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航