css常见布局方案总结

基线

vertical-align

两栏布局

1. flex
2. float+BFC
3. float+margin-left

三栏布局

初始代码

htmlCopy
<div class="column-container">
    <div class="column left">left</div>
    <div class="column center">center</div>
    <div class="column right">right</div>
</div>

cssCopy
    .left{
        background-color: #61dafb;
    }
    .center{
        background-color: #282c34;
    }
    .right{
        background-color: #ff99cc;
    }

grid

cssCopy
.column-container {
  display: grid;
  grid-template-columns: 200px auto 200px;
  column-gap: 10px;
}

Flex 布局

cssCopy

圣杯/双飞翼布局

https://zzfzzf.com/post/1414224256736174082

绝对定位布局

Table 布局

BFC 三栏布局

流体布局

居中

1. Flex布局：Flex布局是CSS3的一种新布局方式，可以实现元素的水平和垂直居中，且适用于不同的元素和屏幕尺寸。可以通过设置容器的display属性为flex，然后设置justify-content和align-items属性为center，即可实现水平和垂直居中。

2. 绝对定位布局：可以将元素设置为绝对定位，并设置top、bottom、left、right属性为0，再设置margin属性为auto，即可实现水平和垂直居中。需要注意的是，这种布局方式需要父元素具有相对定位。

3. 表格布局：可以将元素设置为display: table和display: table-cell，然后设置vertical-align属性为middle，即可实现水平和垂直居中。需要注意的是，这种布局方式需要考虑表格元素的特殊性。

4. Grid布局：可以将元素设置为display: grid，然后设置justify-content和align-items属性为center，即可实现水平和垂直居中。需要注意的是，这种布局方式需要考虑浏览器的兼容性。

5. transform属性布局：可以使用transform属性，将元素向左和向上移动一半的宽度和高度，然后设置left和top属性为50%，即可实现水平和垂直居中。需要注意的是，这种布局方式需要考虑元素的尺寸。

初始代码如下

CSSCopy

margin:auto

CSSCopy

translateY

CSSCopy

display: flex+margin: auto

CSSCopy

justify-content+align-items

CSSCopy

align-self

CSSCopy

margin: auto

CSSCopy

align-items+justify-content

CSSCopy

align-self

CSSCopy