方法一：利用绝对定位
使用条件：
（1）、明确宽高的子元素；
（2）、使用绝对定位，且四个方向的数值都为1；
（3）、子元素可以使用margin:auto;就实现在父元素中的水平垂直方向居中。
position:absolute;
top:0;
button:0;
left:0;
right:0;
margin:auto;
方法二：利用弹性布局
利用弹性布局给该元素的父元素设置：
Box{
display:flex;
flex-deriction:row/column;
justify-content:center;
align-item:center;
}
方法三：利用position和transform实现
<!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>
.parent{
width: 100%;
height: 400px;
position: relative;
background: green;
}
.child{
position: absolute;
width: 200px;
height: 200px;
background: blue;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);//表示的是将当前宽度/2，高度/2，反向移动，第一个是左右，第二个是上下移动，-50%表示左移动200px/2 = 100px,如果是正50%，就是向右移动100px,第二个同理。
}
</style>
</head>
<body>
<div class="parent">
<div class="child"></div>
</div>
</body>
</html>
方法三的最终效果：
关于父级设置相对定位：如果父级标签不开启定位的话，那么子级标签将会以body标签进行定位，如果父级标签开启了定位，那么子级标签将会相对于父级进行定位，代码可以把宽度改小，就能看见一样垂直水平的效果。(子绝父相)
若是不写transform: translate(-50%,-50%)；最终效果图如下：
向左向上移动50%，是以子元素child的左上角来看，没有把子元素自身的宽高算进去，所以还要通过位移函数transform：translate（）来使子元素移动至水平垂直居中（即以子元素中心点为准，子元素中心的位于父元素的水平垂直居中位置。）
补充：
文本和图片水平居中： text-align: center;
文本垂直居中： line-height:当行行高（像素值） ;
1431
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
