flex元素实现水平垂直居中.
2019-09-28 本文已影响0人
鱼香肉丝没有渔
<title>使用flex实现元素水平垂直居中(新版本与老版本)</title>
<style>
* {
margin: 0;
padding: 0;
}
#wrap {
width: 500px;
height: 500px;
background-color: #ccc;
/*新版本
display: flex;
justify-content: center;
操作主轴方向的子元素水平居中
align-items: center;
操作侧轴垂直居中*/
/*老版本
display: -webkit-box;
-webkit-box-pack:center;
操作主轴方向的子元素水平居中
-webkit-box-align:center;*/
}
#wrap .box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id='wrap'>
<div class="box"></div>
</div>
</body>
效果
image.png
