CSS常见布局实现

水平居中

  • 文本/行内/行内块

    1
    2
    3
    parent{
        text-align:center;
    }

  • 单个块级元素

    1
    2
    3
    4
    .son{
        margin: 0 auto; 
    }
    /*左右设置margin为auto将会均分剩余空间.上下设置margin设置了auto,其计算值为0.*/

  • 多个块级元素

    1
    2
    3
    4
    5
    6
    #parent{ 
        text-align:center 
    }
    .son{ 
        display: inline-block 
    }

  • 绝对定位实现居中

    1
    2
    3
    4
    5
    6
    7
    8
    9
    #parent{ 
        position: relative 
    }
    .son{
        position: absolute;
     left: 50%;/*父元素的50%;*/
     transform: translateX(-50%);/*自身的-50%;如果兼容性不好用margin: -XX;*/
     /*子绝父相,通过left或right结合margin或translate达到居中.*/
    }

  • 任意个元素(flex)

    1
    2
    3
    4
    5
    6
    7
    8
    #parent{
        display: flex;
     justify-content: center;
    }

    .son{
     flex:1;
    }

垂直居中

  • 单行文本/行内/行内块

    1
    2
    3
    4
    #parent{
        height: 100px;
        line-height: 100px;
    }

  • 多行文本/行内/行内块

    1
    2
    3
    4
    #parent{
        height: 100px;
        line-height: 20px;//高度除以文本的行数
    }

  • 图片

    1
    2
    3
    4
    5
    6
    7
    8
    #parent{
        height: 100px;
        line-height: 100px;
        font-size:0;//清除幽灵空白节点的BUG
    }
    .son{
        vertical-align: middle;
    }

  • 单个块级元素

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    //方案一: table-cell
    #parent{
        display: table-cell;
        vertical-align: middle;
        //缺点是设置table-cell的元素,宽高设置百分比无效,需要给他的父元素为table才生效.
        //设置table-cell不感知margin,设置float或position会对布局造成破坏.
    }

    //方案二: 绝对定位配合margin或translate
    #parent{
        position: relative;
    }
    .son{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        //或margin-top: -XXX;
    }

    //方案三: margin: auto 0;
    #parent{
        position: retive;
        height:100px;
    }
    .son{
        height: 50px;
        position:absolute;
        top: 0;
        bottom: 0;
        margin: auto 0;
        //原理是当top和bottom为0时,margin-top&bottom会无限延伸沾满空间且平分.
    }

    //方案四: flex
    #parent{
        display: flex;
        align-items: center;
        //或为son设置align-self: center;
    }

  • 任意个元素(flex)

    1
    2
    3
    4
    5
    #parent{
        display: flex;
        align-items: center;
        //或为son设置align-self: center;
    }

    水平垂直居中

    • 行内/行内块/图片

      1
      2
      3
      4
      5
      #parent{
          display: flex;
          justify-content: center;
          align-items: center;
      }

    • Table-cell

      1
      2
      3
      4
      5
      6
      7
      8
      #parent{
          display: table-cell;
          vertical-align: middle;
          /*text-align: center;*/ /*如果子元素是行内元素则添加*/
      }
      .son{
          margin: 0 auto;/*如果是块级元素则添加*/
      }

    • 绝对定位

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      #parent{
          position: retive;
      }
      .son{
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
          /*如果考虑兼容性问题的话可以使用margin*/
      }

    • 绝对居中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
#parent{
    position: retive;
}
.son{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    margin: auto;
    /*
    当top&bottom为0,margin-top&bottom为无限延伸沾满空间并平分.left与right同上.
    */
}

两列布局

左定宽右自适应

  • float+margin
1
2
3
4
5
6
7
8
9
.left{
    width:100px;
    height:100px;
    float:left;
}
.right{
    height:100px;
    margin-left:100px;
}
  • float+overflow
1
2
3
4
5
6
7
8
9
.left{
    width:100px;
    height:100px;
    float:left;
}
.right{
    height:100px;
    overflow: hidden;
}
  • table的单元格自动分配
1
2
3
4
5
6
7
8
9
10
11
12
#parent{
    display:table;
}
.left{
    width:100px;
    height:100px;
    display: table-cell;
}
.right{
    height:100px;
    display:table-cell;
}

  • 绝对定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #parent{
        position: relative;
    }
    .left{
        width:100px;
        height:100px;
        position:absolute;
        top:0;
        left:0;
    }
    .right{
        height:100px;
        position:absolute;
        top:0;
        left:100px;
        right:0;
    }

  • 使用flex实现自适应.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    #parent{
        display:flex;
    }
    .left{
        width:100px;
        height:100px;
    }
    .right{
        height:100px;
        flex:1;/*均分父元素剩余空间*/
    }

  • 使用grid

    1
    2
    3
    4
    #parent{
        display: grid;
        grid-template-columns: 100px auto;/*auto换成1fr也可以*/
    }

一列不定,一列自适应

  • 使用float+overflow实现
1
2
3
4
5
6
7
8
9
10
11
#parent{
    height:100px;
}
.left{
    float: left;/*只设置浮动,不设宽度*/
    height:100px;
}
.right{
    overflow: hidden;
    height:100px;
}
  • flex实现
1
2
3
4
5
6
7
8
9
10
11
#parent{
    display: flex;
    height: 100px;
}
.left{
    height:100px;
}
.right{
    height:100px;
    flex:1;
}
  • 使用Grid实现
1
2
3
4
5
6
7
8
9
10
#parent{
    display: grid;
    grid-template-columns: auto 1fr;
}
.left{
    height: 100px;
}
.right{
    height: 100px;
}

三列布局

两列定宽,一列自适应

1
2
3
4
5
6
7
8
9
10
11
<div id="parent">
    <div class="left">
        左列定宽
    </div>
    <div class="center">
        中间定宽
    </div>
    <div class="right">
        右侧自适应
    </div>
</div>
  • 用float+margin实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#parent{
    min-width:310px;/*防止宽度过小,子元素换行*/
}
.left{
    width:100px;
    height:100px;
    float:left;
}
.center{
    width:200px;
    height:100px;
    float:left;
}
.right{
    margin-left:300px;
    height:100px;
}
  • float+overflow实现
1
2
3
4
5
/*其余样式与以上相同*/
.right{
    overflow: hidden;
    height:100px;
}
  • table-cell的单元格自动分配
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#parent{
    height:100px;
    width:100%;
    display:table;
    border-spacing:10px;/*关键,设置间距*/
}
.left{
    display: table-cell;
    width:100px;
}
.center{
    display: table-cell;
    width:100px;
}
.right{
    display: table-cell;
}
  • 使用flex实现
1
2
3
4
5
6
7
8
9
10
11
12
13
#parent{
    height:100px;
    display:flex;
}
.left{
    width:100px;
}
.center{
    width:200px;
}
.right{
    flex:1;/*均分父元素剩余空间.*/
}
  • 使用Grid实现
1
2
3
4
5
#parent{
    height: 100px;
    display: grid;
    grid-template-columns: 100px 200px 1fr;/*1fr或auto都可以*/
}

####双飞翼布局(两侧定宽,中间自适应)

1
2
3
4
5
6
7
8
9
10
11
<div id="parent">
    <div id="center">
        
    </div>
    <div id="left">
        
    </div>
    <div id="right">
        
    </div>	
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#parent{
    height:100px;
}
#left{
    float:left;
    width:100px;
    height:100px;
    margin-left:-100%;/*上移一行*/
}
#center{
    height:100px;
    float:left;
    width:100%;
}
#right{
    height:100px;
    float:left;
    margin-left: -100px;/*向上移动自身的距离*/
}

圣杯布局方法

  • 定位方式
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
#parent{
    position:relative;
}
#left{
    width:100px;
    position:absolute;
    top:0;
    left:0;
}
#center{
    margin-left:100px;
    margin-right:100px;
}
#right{
    width:100px;
    position: absolute;
    right:0;
    top:0;
}
  • flex方式
1
2
3
4
5
6
7
8
9
10
11
12
#parent{
    display: flex;
}
#left{
    width:100px;
}
#center{
    flex:1;
}
#right{
    width:100px;
}
  • Grid方式
1
2
3
4
#parent{
    display: grid;
    grid-template-columns: 100px 1fr 100px;
}