css几种布局的常见方法

水平居中

• 行内元素：text-align: center;
• 块级元素：设置宽度然后margin:0 auto
• 多个块级元素：父元素设置 text-align: center;，对子元素设置 display: inline-block;或使用 flex 布局

垂直居中

行内元素

单行：

• 设置上下 pandding 相等
• 设置 line-height 和 height 相等

多行：

• 设置上下 pandding 相等
• 设置 display: table-cell; 和 vertical-align: middle
• 使用 flex 布局

块级元素：

父元素相对定位

子元素定高，子元素绝对定位 top:50%;再负 margin-top 把子元素往移一半的高度

未知子元素高，子元素绝对定位 top: 50%; transform: translateY(-50%)

flex布局，父元素justify-content: center;

两栏布局

左列定宽，右列自适应

1. float + margin

<div id="left">左列定宽</div>
<div id="right">右列自适应</div>

#left {
    float: left;
    width: 100px;
    height: 800px;
    background-color: red;
}
#right {
    margin-left: 100px;
    height: 500px;
    background-color: blue;
}

2.float+overflow

right触发bfc实现自适应

<div id="left">左列定宽</div>
<div id="right">右列自适应</div>

#left {
    float: left;
    width: 100px;
    height: 800px;
    background-color: red;
}
#right {
    height: 500px;
    background-color: blue;
    overflow: hidden;
}

3.flex

<div id="parent">
    <div id="left">左列定宽</div>
    <div id="right">右列自适应</div>
</div>

#parent{
    height: 800px;
    display: flex;
}
#left {
    width: 100px;
    background-color: red;
}
#right {
    flex: 1;
    background-color: blue;
}

三栏布局

两列定宽，中间自适应

1.圣杯

将外层包裹设置padding，再设置左右列的position属性分别左右移动到空出的padding部分，使中间列文字不被遮挡。

<div id="parent">
  <div id="center">中间自适应</div>
  <div id="left">左列定宽</div>
  <div id="right">右列定宽</div>
</div>

#parent {
    padding-left: 100px;
    padding-right: 200px;
}
#left {
    float: left;
    position: relative;
    left: -100px;
    width: 100px;
    height: 500px;
    margin-left: -100%;
    background-color: red;
}
#center {
    float: left;
    width: 100%;
    height: 480px;
    background-color: green;
}
#right {
    float: left;
    position: relative;
    right: -200px;
    width: 200px;
    height: 500px;
    margin-left: -200px;
    background-color: blue;
}

2.双飞翼

与圣杯类似，只是在中间多套了一个元素，利用内套center的margin与左右列隔开。与圣杯相比，少了相对定位、padding属性的设置，更加简洁。

<div id="parent">
    <div id="center-box">
        <div id="center">中间自适应</div>
    </div>
    <div id="left">左列定宽</div>
    <div id="right">右列定宽</div>
</div>

#left {
float: left;
width: 100px;
height: 500px;
margin-left: -100%;
background-color: red;
}
#center-box{
float: left;
width: 100%;
height: 300px;
}
#center{
height: 480px;
margin: 0 200px 0 100px; 
background-color: green;
}
#right {
float: left;
width: 200px;
height: 500px;
margin-left: -200px;
background-color: blue;
}

3.position

左右两列脱离文档流，父元素高度不一定撑得起来，对下面盒子的排布有影响

#parent {
    position: relative;
}
#left {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 500px;
    background-color: red;
}
#center {
    height: 500px;
    margin-left: 100px;
    margin-right: 200px; 
    background-color:green;
}
#right {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 500px;
    background-color:blue;
}

4.flex

<div id="parent">
    <div id="left">左列定宽</div>
    <div id="center">中间自适应</div>
    <div id="right">右列定宽</div>
</div>

#parent {
    height: 500px;
    display: flex;
}
#left {
    width: 100px;
    background-color: red;
}
#center {
    flex: 1;
    background-color: green;
}
#right {
    width: 200px;
    background-color:blue;
}