vertical-align
初始代码
html
css
css
css
https://zzfzzf.com/post/1414224256736174082
Flex布局：Flex布局是CSS3的一种新布局方式，可以实现元素的水平和垂直居中，且适用于不同的元素和屏幕尺寸。可以通过设置容器的display属性为flex，然后设置justify-content和align-items属性为center，即可实现水平和垂直居中。
绝对定位布局：可以将元素设置为绝对定位，并设置top、bottom、left、right属性为0，再设置margin属性为auto，即可实现水平和垂直居中。需要注意的是，这种布局方式需要父元素具有相对定位。
表格布局：可以将元素设置为display: table和display: table-cell，然后设置vertical-align属性为middle，即可实现水平和垂直居中。需要注意的是，这种布局方式需要考虑表格元素的特殊性。
Grid布局：可以将元素设置为display: grid，然后设置justify-content和align-items属性为center，即可实现水平和垂直居中。需要注意的是，这种布局方式需要考虑浏览器的兼容性。
transform属性布局：可以使用transform属性，将元素向左和向上移动一半的宽度和高度，然后设置left和top属性为50%，即可实现水平和垂直居中。需要注意的是，这种布局方式需要考虑元素的尺寸。
初始代码如下
CSS
margin:autoCSS
translateYCSS
display: flex+margin: autoCSS
justify-content+align-itemsCSS
align-selfCSS
margin: autoCSS
align-items+justify-contentCSS
align-selfCSS
<div class="column-container">
<div class="column left">left</div>
<div class="column center">center</div>
<div class="column right">right</div>
</div>
.left{
background-color: #61dafb;
}
.center{
background-color: #282c34;
}
.right{
background-color: #ff99cc;
}
.column-container {
display: grid;
grid-template-columns: 200px auto 200px;
column-gap: 10px;
}
.column-container {
display: flex;
column-gap: 10px;
}
.left,
.right {
width: 200px;
}
.center {
flex: 1;
}