垂直居中
2018-01-23 本文已影响0人
HEVI1991
资料来源
在不考虑适配IE9以下的设备的情况下， 使用display:flex;布局很方便。 废话不多说， 直接上代码
<!DOCTYPE html>
<html>
<head>
<style>
/* css */
body {
padding: 0;
margin: 0;
}
.wrap {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: yellow;
display: flex;
align-items: center;
justify-content: center;
}
.center {
background: green;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">hello</div>
</div>
</body>
</html>
效果如下：
效果
