想要实现盒子水平居中的方法有三种
是在css样式学到定位阶段，知道到的方法
第一种方法：使用子绝父相配合margin的值来实现盒子水平垂直居中
给父盒子设置相对定位，再给子盒子设置绝对定位
left: 50%; top: 50%,是向右移一半的距离和向下移一半的距离
margin-left: -100px; 是向左移动自身宽度的一半距离
margin-top: -100px; 是向上移动自身高度的一半距离
演示代码如下：
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.father {
position: relative;
width: 400px;
height: 400px;
margin: auto;
background-color: pink;
}
.son {
position: absolute;
left: 50%;
margin-left: -100px;
top: 50%;
margin-top: -100px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
`
是在web移动端学习到位移阶段 知道的方法
第二种方法: ：使用定位和位移的方法来实现盒子水平居中
父盒子设置相对定位,子盒子设置绝对定位
left: 50%; top: 50%,是向右移一半的距离和向下移一半的距离
translatex 是相对于自身宽度和高度
第一个值是x坐标轴移动自身宽度的一半
第二个值是y坐标轴移动自身高度的一半
transform: translatex(-50%,-50% );
演示代码如下：
<style>
.father {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
background-color: orange;
}
.son {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
background-color: red;
// transform: translatexX(-50%) translatexY(-50%);
transform: translatex(-50%,-50% );
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
第三种方法:位将四个方位的值都设置为0然后设置margin:auto 也能实现效果
演示代码如下：
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.father {
position: relative;
width: 400px;
height: 400px;
margin: 100px auto;
background-color: pink;
}
.son {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 100px;
height: 100px;
background-color: orange;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
这三种水平居中的方法都是必须掌握的css样式。还有一些浮动、定位和flex布局的一些方法都是必须要知道会用的。
