说明:
(1)CSS是一个逻辑性不强的编程语言,相对于其他语言,经验显得更加重要。
(2)在Flex布局出现以前,相对于水平居中,实现垂直居中是一件比较麻烦的事情。
准备工作:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对居中</title>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>
<style>
.father{
width: 600px;
height: 600px;
background: blue;
}
.son{
width: 300px;
height: 300px;
background: green;
}
</style>
创建父子两个div,如果没有特别设置,父子div的相对位置如下图所示:
绝对居中
利用flex布局,在父块级元素中的css中只需要3句代码搞定水平方向和垂直方向都居中:
.father{
display: flex;
justify-content: center;
align-items: center;
}