版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/zhaihaohao1/article/details/84835958
1、position相关
position: fixed;
固定布局
position: relative;
相对定位
position: absolute;
绝对定位；
具体参考：
https://blog.csdn.net/zhaihaohao1/article/details/84316119
2、display相关
display: flex;
align-items: center;
子控件竖直居中
justify-content: space-between;
横向摆放的样子
具体参考：
https://blog.csdn.net/zhaihaohao1/article/details/84645955
3、水平居中
width: 200px;
margin: 0 auto;
效果：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 适配手机-->
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<style>
*{
margin: 0px;
padding: 0px;
}
.spjz{
width: 200px;
height: 50px;
background-color: cornflowerblue;
margin: 0 auto;
}
</style>
</head>
<body style="background-color: yellow">
<div class="spjz"></div>
</body>
</html>
4、文字居中
text-align: center;
line-height: 45px;
实现文字的水平竖直居中
效果图：
代码：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 适配手机-->
<meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
<style>
*{
margin: 0px;
padding: 0px;
}
.wzjz{
background-color: cornflowerblue;
line-height: 50px;
text-align: center;
color: #fff;
}
</style>
</head>
<body>
<div class="wzjz">文字水平竖直居中</div>
</body>
</html>
熟练掌握上面4点，基本可以实现所有布局