1. 1. 居中
    1. 1.1. 水平居中
    2. 1.2. 垂直居中
    3. 1.3. 水平垂直居中
  2. 2. 等高布局
    1. 2.1. flex 布局实现
    2. 2.2. gird 布局实现
    3. 2.3. table 布局实现
  3. 3. 单栏布局
    1. 3.1. 顶底部都不固定
    2. 3.2. 顶部固定
    3. 3.3. 底部固定
  4. 4. 两栏布局
  5. 5. 三栏布局
常见页面布局的CSS实现
CSS

居中

水平居中

对于水平居中一般可以使用如下四种方式：

  • 对于行内元素我们可以在父元素上设置text-align:center;来实现

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

  • 对于定长块级元素我们可以使用margin: 0 auto;来实现

    1
    2
    3
    4
    .center {
      width: 130px;
      margin: 0 auto;
    }

  • 我们可以在父元素上使用flex布局来实现

    1
    2
    3
    4
    .center {
      display: flex;
      justify-content: center;
    }

  • 我们可以在父元素上使用grid布局来实现

    1
    2
    3
    4
    .center {
      display: grid;
      justify-content: center;
    }

垂直居中

对于垂直居中一般可以使用如下四种方式：

  • 我们可以在父元素上设置line-height等于height来实现

    1
    2
    3
    4
    .center {
      height: 100px;
      line-height: 100px;
    }

  • 我们可以在父元素上使用flex布局来实现

    1
    2
    3
    4
    .center {
      display: flex;
      align-items: center;
    }

  • 我们可以在父元素上使用grid布局来实现

    1
    2
    3
    4
    .center {
      display: grid;
      align-content: center;
    }

  • 我们可以在父元素上使用table布局来实现

    1
    2
    3
    4
    .center {
      display: table-cell;
      vertical-align: middle;
    }

水平垂直居中

  • 绝对定位

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .center {
      position: absolute;
      width: 200px;
      height: 100px;
      background: red;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }

  • 绝对定位加负外边距：需要知道居中元素的具体宽高，不然负的margin没法设置

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    .center {
      position: absolute;
      width: 200px;
      height: 100px;
      background: red;
      left: 50%;
      top: 50%;
      margin-left: -100px;
      margin-top: -50px;
    }

  • 绝对定位加平移：不需要考虑居中盒子的具体宽高

    1
    2
    3
    4
    5
    6
    7
    8
    9
    .center {
      position: absolute;
      width: 200px;
      height: 100px;
      background: red;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }

  • 使用 flex 实现

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

  • 使用 grid 实现

    1
    2
    3
    4
    5
    .center {
      display: grid;
      /* align-content和justify-content的简写 */
      place-content: center;
    }

  • 使用 table 加外边距实现，需注意：

    • display: table时padding会失效

    • display: table-row时margin、padding同时失效

    • display: table-cell时margin会失效

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .box {
      height: 300px;
      width: 600px;
      display: table-cell;
      vertical-align: middle;
    }

    .child {
      width: 200px;
      height: 200px;
      margin: 0 auto;
    }

等高布局

等高布局一般把网页垂直分成几部分，每一部分的高度是取这几个模块中最高的那个。效果如下

1
2
3
4
5
<div class="wrap">
  <div class="left">left</div>
  <div class="content">content</div>
  <div class="right">right</div>
</div>

flex 布局实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.wrap {
  display: flex;
  min-height: 100%;
}

.left {
  flex-basis: 100px;
  background-color: #e7ece7;
}

.right {
  flex-basis: 100px;
  background-color: #c7cca9;
}

.content {
  height: 200px;
  flex-grow: 1;
  background-color: #fac5cc;
}

gird 布局实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.wrap {
  display: flex;
  min-height: 100%;
  grid-template-columns: 100px auto 100px;
}

.left {
  background-color: #e7ece7;
}

.right {
  background-color: #c7cca9;
}

.content {
  height: 200px;
  background-color: #fac5cc;
}

table 布局实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
.wrap {
  display: table;
  min-height: 100%;
}

.left {
  width: 100px;
  display: table-cell;
  background-color: #e7ece7;
}

.right {
  width: 100px;
  display: table-cell;
  background-color: #c7cca9;
}

.content {
  display: table-cell;
  height: 200px;
  background-color: #fac5cc;
}

单栏布局

单栏布局我们常用在网页框架上，一般我们把网页分为 header、content、footer三部分。

顶底部都不固定

  • 使用 padding 加负 margin 实现

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="header">header</div>
      <div class="content">content</div>
    </div>
    <div class="footer">footer</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .wrap {
      min-height: 100%;
      padding-bottom: 50px;
      overflow: auto;
      box-sizing: border-box;
    }

    .header {
      height: 50px;
      background-color: #e7ece7;
    }

    .footer {
      height: 50px;
      margin-top: -50px;
      background-color: #c7cca9;
    }

    .content {
      height: 200px;
      background-color: #fac5cc;
    }

  • 使用 flex 实现

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="header">header</div>
      <div class="content">content</div>
      <div class="footer">footer</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .wrap {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .header {
      height: 50px;
      background-color: #e7ece7;
    }

    .footer {
      height: 50px;
      background-color: #c7cca9;
    }

    .content {
      flex-grow: 1;
      background-color: #fac5cc;
    }

顶部固定

  • 使用 padding 加负 margin 加 fixed 实现顶部固定布局

    1
    2
    3
    4
    5
    <div class="header">header</div>
    <div class="wrap">
      <div class="content">content</div>
    </div>
    <div class="footer">footer</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .header {
      height: 50px;
      width: 100%;
      position: fixed;
      background-color: #e7ece7;
    }

    .wrap {
      min-height: 100%;
      overflow: auto;
      box-sizing: border-box;
    }

    .content {
      margin-top: 50px;
      height: 200px;
      background-color: #fac5cc;
    }

    .footer {
      height: 50px;
      margin-top: -50px;
      background-color: #c7cca9;
    }

  • 使用 flex 加 fixed 定位实现

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="header">header</div>
      <div class="content">content</div>
      <div class="footer">footer</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .wrap {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .header {
      height: 50px;
      width: 100%;
      position: fixed;
      background-color: #e7ece7;
    }

    .content {
      margin-top: 50px;
      flex-grow: 1;
      height: 200px;
      background-color: #fac5cc;
    }

    .footer {
      height: 50px;
      background-color: #c7cca9;
    }

底部固定

  • 使用 padding 加负 margin 实现底部固定布局

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="header">header</div>
      <div class="content">content</div>
    </div>
    <div class="footer">footer</div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    .wrap {
      height: 100%;
      padding-bottom: 50px;
      overflow: auto;
      box-sizing: border-box;
    }

    .header {
      height: 50px;
      background-color: #e7ece7;
    }

    .content {
      height: 200px;
      background-color: #fac5cc;
    }

    .footer {
      height: 50px;
      margin-top: -50px;
      background-color: #c7cca9;
    }

  • 使用 flex 加 fixed 定位实现

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="header">header</div>
      <div class="content">content</div>
      <div class="footer">footer</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .wrap {
      min-height: 100%;
      display: flex;
      flex-direction: column;
    }

    .header {
      height: 50px;
      background-color: #e7ece7;
    }

    .content {
      margin-top: 50px;
      flex-grow: 1;
      height: 200px;
      background-color: #fac5cc;
    }

    .footer {
      height: 50px;
      width: 100%;
      position: fixed;
      background-color: #c7cca9;
    }

两栏布局

两栏布局就是一边固定，另外一边自适应

  • 左 float，然后右 margin-left（右边自适应）

    1
    2
    <div class="aside"></div>
    <div class="main"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .aside {
      width: 100px;
      height: 100%;
      float: left;
      background-color: #e7ece7;
    }

    .main {
      height: 100%;
      margin-left: 100px;
      background-color: #fac5cc;
    }

  • 右 float，然后右 margin-right（左边自适应）

    1
    2
    <div class="aside"></div>
    <div class="main"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    .aside {
      width: 100px;
      height: 100%;
      float: right;
      background-color: #e7ece7;
    }

    .main {
      height: 100%;
      margin-right: 100px;
      background-color: #fac5cc;
    }

  • absolute 定位加 margin-left（右边自适应）

    1
    2
    3
    4
    <div class="wrap">
      <div class="aside">aside</div>
      <div class="main">main</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    .wrap {
      height: 100%;
      position: relative;
    }

    .aside {
      width: 100px;
      height: 100%;
      position: absolute;
      background-color: #e7ece7;
    }

    .main {
      height: 100%;
      margin-left: 100px;
      background-color: #fac5cc;
    }

  • absolute 定位加 margin-right（左边自适应）

    1
    2
    3
    4
    <div class="wrap">
      <div class="aside">aside</div>
      <div class="main">main</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    .wrap {
      height: 100%;
      position: relative;
    }

    .aside {
      width: 100px;
      height: 100%;
      position: absolute;
      right: 0;
      background-color: #e7ece7;
    }

    .main {
      height: 100%;
      margin-right: 100px;
      background-color: #fac5cc;
    }

  • 使用 flex 实现

    1
    2
    3
    4
    <div class="wrap">
      <div class="aside">aside</div>
      <div class="main">main</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .wrap {
      display: flex;
      height: 100%;
    }

    .aside {
      flex: 0 0 100px;
      background-color: #e7ece7;
    }

    .main {
      flex: 1 1;
      background-color: #fac5cc;
    }

  • 使用 grid 实现

    1
    2
    3
    4
    <div class="wrap">
      <div class="aside">aside</div>
      <div class="main">main</div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    .wrap {
      display: grid;
      grid-template-columns: 100px auto;
      height: 100%;
    }

    .aside {
      flex: 0 0 100px;
      background-color: #e7ece7;
    }

    .main {
      flex: 1 1;
      background-color: #fac5cc;
    }

三栏布局

三栏布局就是两边固定，中间自适应布局

  • position + margin-left + margin-right 实现三栏布局

    1
    2
    3
    <div class="left"></div>
    <div class="middle"></div>
    <div class="right"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    .left {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100%;
      background-color: #e7ece7;
    }

    .middle {
      margin-left: 100px;
      margin-right: 100px;
      height: 100%;
      background-color: #fac5cc;
    }

    .right {
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 100%;
      background-color: #c7cca9;
    }

  • float + margin-left + margin-right 实现三栏布局

    1
    2
    3
    <div class="left"></div>
    <div class="right"></div>
    <div class="middle"></div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .left {
      float: left;
      width: 100px;
      height: 100%;
      background-color: #e7ece7;
    }

    .middle {
      margin-left: 100px;
      margin-right: 100px;
      height: 100%;
      background-color: #fac5cc;
    }

    .right {
      float: right;
      width: 100px;
      height: 100%;
      background-color: #c7cca9;
    }

  • flex 实现三栏布局

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    .wrap {
      display: grid;
      grid-template-columns: 100px auto 100px;
      height: 100%;
    }

    .left {
      height: 100%;
      background-color: #e7ece7;
    }

    .middle {
      height: 100%;
      background-color: #fac5cc;
    }

    .right {
      height: 100%;
      background-color: #c7cca9;
    }

  • 圣杯布局：主要用到了浮动和和相对定位

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="middle">middle</div>
      <div class="left">left</div>
      <div class="right">right</div>
    </div>
    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
    .wrap {
      padding: 0 100px 0 100px;
      height: 100%;
    }

    .left {
      width: 100px;
      height: 100%;
      float: left;
      margin-left: -100%;
      position: relative;
      left: -100px;
      background-color: #e7ece7;
    }

    .middle {
      width: 100%;
      height: 100%;
      float: left;
      background-color: #fac5cc;
    }

    .right {
      width: 100px;
      height: 100%;
      float: left;
      margin-left: -100px;
      position: relative;
      right: -100px;
      background-color: #c7cca9;
    }

  • 双飞翼布局

    1
    2
    3
    4
    5
    <div class="wrap">
      <div class="middle">middle</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
    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
    .wrap {
      float: left;
      width: 100%;
      height: 100%;
    }

    .left {
      width: 100px;
      height: 100%;
      float: left;
      margin-left: -100%;
      background-color: #e7ece7;
    }

    .middle {
      height: 100%;
      margin-left: 100px;
      margin-right: 100px;
      background-color: #fac5cc;
    }

    .right {
      width: 100px;
      height: 100%;
      float: left;
      margin-left: -100px;
      background-color: #c7cca9;
    }
Previous post
Next post