这篇文章想要实现如下的效果
这个简单方法的精髓是将html标签和body标签的height设为100%，完整代码如下：
<!DOCTYPE html>
<html style="height: 100%;">
<head>
<meta charset="utf-8">
<title>center</title>
</head>
<body style="height: 100%;margin: 0;padding: 0;">
<div class="main" style="width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;">
<div style="background-color: red;width: 40%;height: 40%">
我是水平垂直居中的方块
</div>
</div>
</body>
</html>具体样式：
其中水平垂直居中运用flex布局的方法（注：main为需要水平垂直居中元素的外层元素）：
.main{
width: 100%;
height: 100%; /*该元素完整撑开整个页面*/
display: flex; /*flex布局*/
align-items: center; /*垂直居中*/
justify-content: center; /*水平居中*/
}html和body样式：
html,body{
height: 100%;
margin: 0;
padding: 0;
}
扫一扫
1004
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
