水平垂直居中的二种方法
2017-08-16 本文已影响9人
哼_
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style>
.box{
width:300px;
height: 300px;
border:1px solid #000;
display: flex;
justify-content: center;
align-items: center;
}
.one{
width:100px;
height: 100px;
background: red;
}
.box2{
width:300px;
height: 300px;
border:1px solid #000;
display: flex;
}
.one2{
width:100px;
height: 100px;
background: red;
margin:auto;
}
</style>
</head>
<body>
<h1>如何让盒子水平垂直居中 方法一</h1>
<div class="box">
<div class="one"></div>
</div>
<h1>如何让盒子水平垂直居中 方法二</h1>
<div class="box2">
<div class="one2"></div>
</div>
</body>
</html>
效果图
方法一: 给父元素加
display :flex;
jusitfy-content:center;
align-items:center;
方法二:给父元素加
display:flex;
子元素加 margin:auto; 就OK了,是不是很简单
垂直水平居中
