htmledit_views">
⾏内元素⽔平垂直居中 设置⽗级标签。 ⽔平居中： text-align: center 垂直居中： line-height：盒⼦⾼度
⽔平垂直都居中
<!DOCTYPE html>
<html>
<head><style>.container {position: relative;width: 200px;height: 200px;border: 1px solid black;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>top: 50%;
left: 50%;
transform: translate(-50%, -50%);
这三个需要一起用实现居中
绝对定位 + 四个方向 margin: auto
<!DOCTYPE html>
<html>
<head><style>.container {position: relative;width: 200px;height: 200px;border: 1px solid black;}.child {position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;这5个需要一起用
flex 布局
<!DOCTYPE html>
<html>
<head><style>.container {display: flex;justify-content: center;align-items: center;width: 200px;height: 200px;border: 1px solid black;}.child {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>display: flex;
justify-content: center;
align-items: center;这三个需要一起用
table-cell
<!DOCTYPE html>
<html>
<head><style>.container {display: table-cell;text-align: center;vertical-align: middle;width: 200px;height: 200px;border: 1px solid black;}.child {width: 100px;height: 100px;background-color: blue;}</style>
</head>
<body><div class="container"><div class="child"></div></div>
</body>
</html>display: table-cell;
text-align: center;
vertical-align: middle;这三个需要一起用
