分为定位的方法，和不定位的方法。
使用定位的方法：
- 定位+transform：
父元素相对定位，子元素绝对定位，设置子元素的 top:50%; left:50%;transform:translate: (-50%,-50%)，代码对应类名f1,box1。 - 定位+margin：
父元素相对定位，子元素绝对定位，设置子元素的 top:50%; left:50%;margin-left:负的自身宽度的一半，margin-top：负的自身高度的一半。代码对应类名f1，box1。代码都写在了这一部分里，有标注。 - 定位+margin：
父元素相对定位，子元素绝对定位。设置子元素的left，right，bottom，top都为0，margin：auto；代码对应类名f3,box3。
不用定位的方法：
- table-cell方法，赋予父元素单元格的属性：
父元素display：table-cell; vertical-align: middle；设置子元素的margin：0 auto；代码对应类名 f2，box2。 - flex弹性盒子布局：
设置父元素display: flex;
justify-content: center;
align-items: center;
代码对应类名 f4，box4。
html代码：
外层div与内层div，span标签区分第几种，序号。
<body>
<span>1</span>
<div class="f1">
<div class="box1"></div>
</div>
<span>2</span>
<div class="f2">
<div class="box2"></div>
</div>
<span>3</span>
<div class="f3">
<div class="box3"></div>
</div>
<span>4</span>
<div class="f4">
<div class="box4"></div>
</div>
</body>
style内容：
.f1 {
width: 300px;
height: 200px;
border: 1px solid red;
position: relative;
}
.box1 {
position: absolute;
width: 100px;
height: 50px;
background-color: pink;
/*父元素相对定位，
子元素绝对定位，
设置子元素的 top:50%; left:50%;
transform:translate: (-50%,-50%)
*/
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
/* 方法2：父元素相对定位，子元素绝对定位
设置子元素：
top:50%;
left:50%;
margin-left: 负的宽度一半
margin-top: 负的高度一半。
这两种类似，我写在了一个类里面。
*/
/* margin-left: -50px;
margin-top: -25px; */
}
.f2 {
width: 300px;
height: 200px;
background: rgb(241, 241, 43);
border: 1px solid #555555;
/* 方法3:父元素display：table-cell;vertical-align:middle;
子元素：margin：0 auto;*/
display: table-cell; /*转换为table单元格显示*/
/*垂直居中*/
vertical-align: middle;
}
.box2 {
width: 100px;
height: 100px;
background: pink;
margin: 0 auto;
/*水平居中*/
}
.f3 {
width: 300px;
height: 200px;
border: 1px solid red;
background: lightyellow;
/* 方法4：
父元素相对定位，子元素绝对定位，
设置子元素left，right，bottom，top都为0，margin：auto；*/
position: relative;
}
.box3 {
position: absolute;
width: 100px;
height: 100px;
background: pink;
left: 0;
top: 0;
bottom: 0;
right: 0;
margin: auto;
}
.f4 {
width: 300px;
height: 200px;
border: 1px solid red;
background: lightyellow;
/*方法5：flex弹性盒子布局
设置父元素display: flex;
justify-content: center;
align-items: center;*/
display: flex;
/*主轴方向居中,即水平居中*/
justify-content: center;
/*侧轴方向居中,即水平居中*/
align-items: center;
}
.box4 {
width: 100px;
height: 100px;
background: pink;
}
文章整理完了，欢迎测试代码或下方评论哦~
