未知宽高元素水平垂直居中对齐
代码前提：使用一个父盒子包含一个宽高随意的子元素，使子元素在父元素内水平垂直居中。
方式一：弹性盒子
代码思路：
- 将父盒子添加
display:flex将其设置为弹性布局； - 给父盒子样式中添加属性
justify-content:center和align-items:center即可将子元素水平居中。
注：在弹性布局中，可以给设置了弹性布局的父元素样式中添加
justify-content和align-items属性，其中：
justify-content用于设置主轴上子元素的排列方式，设置center时表示在主轴居中对齐。
align-items用于设置侧轴上子元素的排列方式，设置center时表示在侧轴居中对齐。
方式一代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>弹性盒子</title>
<style>
.outer{
/* 设置子盒子水平居中 */
display: flex;
justify-content: center;
align-items: center;
/* 设置父盒子水平居中 */
margin: 0 auto;
width: 80%;
height: 500px;
background-color: pink;
}
.inner{
width: 200px;
height: 200px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
方式二：表格元素
代码思路：
- 将父盒子添加
display:table-cell将其设置为单元格； - 给父盒子样式中添加属性
text-align:center和vertical-align:middle即可将子元素水平居中。 - 因为
vertical-align属性只对行内元素和行内块元素有效，因此，要将子盒子添加display:inline-block将其转换为为行内块。
方式二代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格元素</title>
<style>
.outer{
/* 将父级盒子设置为单元格 */
display: table-cell;
text-align: center;
vertical-align: middle;
width: 980px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.inner{
/* vertical-align只针对行内元素 | 行内块元素有效 */
display: inline-block;
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
方式三：定位
代码思路：
- 子绝父相，给父盒子设置相对定位，给子盒子设置绝对定位；
- 给子盒子添加
top和left边偏移量，使其向下和向右偏移父盒子的宽|高的50%，即top:50%，left:50%。 - 这样偏移之后还需将子盒子往回走自己宽|高的一般才能实现居中，平常可以用
margin-top:-100px，margin-left:-100px等（假设子盒子的宽高均为200px）来实现这个移动，但是若宽高数字较为复杂，需要进行一步多余的计算，因此这里通过transform转换来实现这个移动，即transform:translate(-50%,-50%)。 - 此时子盒子就在父盒子中水平垂直居中了。
知识点补充：transform转换之移动——translate：
2D移动（translate）是2D转换（transform）里的一种功能，可以改变元素在页面中的位置，类似于定位。
语法：
/* translateX 即在x轴上移动，100px即移动的距离*/ transform:translateX(100px); /* translateY 即在Y轴上移动，100px即移动的距离*/ transform:translateY(100px); /* 合并写法，x y分别表示元素在X轴或Y轴上移动的距离*/ transform:translate(x,y);重点：
- translate最大的优点：不会影响到其他元素的位置（这是用margin和定位做不到的）
- translate中的百分比单位是相对于自身元素的：！！
- 比如
transform:translate(50%,50%)即向X轴和Y轴分别移动自身宽或高的50%。- translate对行内标签没有作用。
方式三代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.outer{
position: relative;
width: 980px;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.inner{
position: absolute;
left: 50%;
top: 50%;
/* 使元素往回移动它的宽高的-50% */
transform: translate(-50%,-50%);
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner">
</div>
</div>
</body>
</html>
方式三：grid布局
代码思路：
- 将父盒子添加`display:grid将其设置为grid布局；
- 给父盒子样式中添加属性
justify-content:center和align-items:center即可将子元素水平居中。
注：【grid布局中这两个属性的用法于flex布局中一样】在gird布局中，可以给设置了弹性布局的父元素样式中添加
justify-content和align-items属性，其中：
justify-content用于设置主轴上子元素的排列方式，设置center时表示在主轴居中对齐。
align-items用于设置侧轴上子元素的排列方式，设置center时表示在侧轴居中对齐。
方式四代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.grid{
display: grid;
justify-content: center;
align-items: center;
/* 基础宽高颜色 */
width: 80%;
height: 500px;
background-color: pink;
margin: 0 auto;
}
.grid div{
width: 100px;
height: 100px;
background-color: skyblue;
}
</style>
</head>
<body>
<div class="grid">
<div></div>
</div>
</body>
</html>
总结
以上四种方式实现的布局效果均如下图，可以实现子盒子的水平垂直居中。如代码或思路有任何不足，欢迎补充。
