前端盒子居中对齐
案例分析：
1.H5结构：两个盒子，大盒子包着小盒子，
2.CSS样式：大盒子pink，小盒子skyblue
3.实现方法：margin外边距法；table-cell布局法；弹性布局法；定位法，其中定位法是我们在书写前端页面中最最最常用的方法，强烈建议使用。
运行结果：
一、margin外边距：先算好上外边距：子盒子自身宽度的一半加上父盒子宽度的一半;再设置左右边距自动即可居中，margin:?px auto;【以上给子盒子即可】
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: pink;
/* 给父盒子开启隐藏解决父子外边距合并问题 */
overflow: hidden;
}
.box1 {
/* 使用margin调整上下左右居中，上边距离是子盒子宽度的一半加上父盒子宽度的一半 */
margin: 75px auto 0;
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>
二、table-cell布局：父盒子设置display:table-cell;vertical-align:middle;实现垂直居中；子盒子设置:margin:0 auto;实现水平居中
<style>
.box {
/* 父盒子宽高背景色 */
width: 200px;
height: 200px;
background-color: pink;
/* 给父级设置如下代码转换 */
/* table-cell布局 */
display: table-cell;
/* 完成上下垂直居中 */
vertical-align: middle;
}
.box1 {
/* 子盒子一定要margin 0 auto 居于父盒子水平居中 */
margin: 0 auto;
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
三、flex弹性布局：父盒子设置：display:flex;align-items:center;justify-content:center;即可实现子盒子水平垂直居中
<style>
.box {
/* 弹性布局使得所有孩子居中并且具有盒子属性【下三行代码】 */
display: flex;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: pink;
}
.box1 {
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<span class="box1"></span>
</div>
</body>
【强烈推荐】四、定位法：
子绝父相先定位子盒子： top:50%;left:50%;transform:translate(-50%,-50%);
<style>
.box {
position: relative;
width: 200px;
height: 200px;
background-color: pink;
}
.box1 {
/* 定位法使得垂直居中水平居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 50px;
height: 50px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
