div水平垂直居中的方法多种多样
图示：
下面展示一些
内联代码片
。
<body>
<div id="parent">
<div id="child"></div>
</div>
</body>
方法一：使用flex布局
<style>
* {
margin: 0;
padding: 0;
}
#parent {
width: 400px;
height: 400px;
background-color: aqua;
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
}
#child {
width: 200px;
height: 200px;
background-color: bisque;
}
</style>
方法二：在父元素设置定位元素，在子元素使用绝对定位，相对于父元素进行定位，设置top和left属性，可以使用经过计算后的值或者百分比。
<style>
* {
margin: 0;
padding: 0;
}
#parent {
width: 400px;
height: 400px;
background-color: aqua;
margin: 0 auto;
position: relative;
}
#child {
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
/* top: 100px;
left: 100px; */
top: 25%;
left: 25%;
}
</style>
方法三：在子元素使用绝对定位元素，设置top,left,right,bottom的值为0，margin:auto;
<style>
* {
margin: 0;
padding: 0;
}
#parent {
width: 400px;
height: 400px;
background-color: aqua;
margin: 0 auto;
position: relative;
}
#child {
width: 200px;
height: 200px;
background-color: bisque;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
方法四：设置子元素的margin-left和margin-top的值，计算父元素的宽高减去子元素的宽高/2。
![龙珠训练营task04[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)