<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
display: flex;
/* 水平方向：两端对齐，间隔相等 */
justify-content: space-around;
}
.case1,
.case2,
.case3 {
height: 300px;
width: 300px;
border: 1px solid black;
}
/* 1、flex布局 */
.case1 {
display: flex;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
/* 2、grid布局 */
.case2 {
display: grid;
/* 水平居中 */
justify-content: center;
/* 垂直居中 */
align-items: center;
}
/* 3、absolute、transform */
.case3 {
position: relative;
}
.case3 .child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
<body>
<!-- 1、flex布局 -->
<div class="case1">
<div>
<h1>flex布局居中</h1>
<ul>
<li>兼容IE9以上</li>
<li>适合一行一列</li>
</ul>
</div>
</div>
<!-- 2、grid布局 -->
<div class="case2">
<div>
<h1>grid布局居中</h1>
<ul>
<li>兼容IE9以上</li>
<li>适合多行多列</li>
</ul>
</div>
</div>
<!-- 3、absolute、transform -->
<div class="case3">
<div class="child">
<h1>absolute、transform</h1>
<ul>
<li>相对定位、绝对定位</li>
<li>子元素top、left、translate</li>
</ul>
</div>
</div>
</body>
</html>
