xccjk
commented
2 years ago 代码片段
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>垂直居中的几种方式</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid #000;
box-sizing: border-box;
overflow: scroll;
}
.item {
width: 100px;
height: 100px;
background: gold;
border: 1px solid #ddd;
}
.box0 {
display: flex;
justify-content: center;
align-items: center;
}
.box1 {
position: relative;
}
.box1 .item {
position: absolute;
left: 50px;
top: 50px;
}
.box2 {
display: grid;
place-items: center;
}
.box3 {
display: grid;
}
.box3 .item {
margin: auto;
}
.box4 {
position: relative;
}
.box4 .item {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.box5 .item {
margin: 50px;
}
.box6 {
padding: 50px;
box-sizing: border-box;
}
.box7 {
position: relative;
}
.box7 .item {
position: absolute;
left: 50%;
top: 50%;
margin: -50px 0 0 -50px;
}
.box8 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.box8 .item {
display: inline-block;
overflow: scroll;
}
/* 不定宽高样式 */
.item1 {
background: gold;
border: 1px solid #ddd;
}
.box9 {
display: grid;
}
.box9 .item1 {
align-self: center;
justify-self: center;
}
.box10 {
display: flex;
justify-content: center;
align-items: center;
}
.box11 {
position: relative;
}
.box11 .item1 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.box12 {
writing-mode: vertical-lr;
text-align: center;
}
.box12 .children {
display: inline-block;
writing-mode: horizontal-tb;
text-align: center;
width: 100%;
}
.box12 .children .item1 {
display: inline-block;
}
</style>
<body>
<h1>垂直居中的几种方式</h1>
<h2>定宽高</h2>
<h3>flex布局</h3>
<div class="box0 box">
<span class="item">display flex</span>
</div>
<h3>grid place-items</h3>
<div class="box2 box">
<span class="item">grid place-items</sp>
</div>
<h3>grid margin</h3>
<div class="box3 box">
<span class="item">grid margin auto</sp>
</div>
<h3>position top/left</h3>
<div class="box1 box">
<span class="item">position top left</span>
</div>
<h3>position transform</h3>
<div class="box4 box">
<div class="item">position transform</div>
</div>
<h3>position margin</h3>
<div class="box5 box">
<div class="item">position margin</div>
</div>
<h3>position padding</h3>
<div class="box6 box">
<div class="item">position padding</div>
</div>
<h3>position margin 负值</h3>
<div class="box7 box">
<div class="item">position margin 负值</div>
</div>
<h3>position table-cell</h3>
<div class="box8 box">
<div class="item">table-cell + vertical-align + text-align + inline-block || table-cell + vertical-align + margin: auto</div>
</div>
<h2>不定宽高</h2>
<h3>grid flex</h3>
<div class="box9 box">
<div class="item1">grid + flex布局</div>
</div>
<h3>flex</h3>
<div class="box10 box">
<div class="item1">flex布局</div>
</div>
<h3>position transform</h3>
<div class="box11 box">
<div class="item1">position + transform</div>
</div>
<h3>writing-mode</h3>
<div class="box12 box">
<div class="children">
<div class="item1">writing-mode</div>
</div>
</div>
</body>
</html>
CSS实现水平垂直居中的几种常见 方式
相关demo查看codesandbox
定宽高
不定宽高
总结
在考虑兼容性的情况下，并且子元素宽高不用固定的情况下，使用下面两种布局方式比较合适