基线
vertical-align
两栏布局
- flex
- float+BFC
- float+margin-left
三栏布局
初始代码
<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;
}
grid
.column-container {
display: grid;
grid-template-columns: 200px auto 200px;
column-gap: 10px;
}
Flex 布局
.column-container {
display: flex;
column-gap: 10px;
}
.left,
.right {
width: 200px;
}
.center {
flex: 1;
}
圣杯/双飞翼布局
https://zzfzzf.com/post/1414224256736174082
绝对定位布局
Table 布局
BFC 三栏布局
流体布局
居中
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%，即可实现水平和垂直居中。需要注意的是，这种布局方式需要考虑元素的尺寸。
初始代码如下
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
<div class="container">
<div class="content"></div>
</div>
margin:auto
.container {
position: relative;
}
.content {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
translateY
.container {
position: relative; /* 设置父元素position为relative */
}
.content {
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
left: 50%
}
display: flex+margin: auto
.container {
display: flex; /* 设置父元素设置为flex容器 */
}
.content {
margin: auto;
}
justify-content+align-items
.container {
display: flex;
justify-content: center;
align-items: center;
}
align-self
.container {
display: flex;
}
.content {
align-self: center;
margin: 0 auto;
}
margin: auto
.container {
display: grid;
}
.content {
margin: auto;
}
align-items+justify-content
.container {
display: grid;
align-items: center;
justify-content: center;
}
align-self
.container {
display: grid;
}
.content {
justify-self: center; /* 设置子元素垂直居中 */
align-self: center; /* 设置子元素水平居中*/
}