导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

水平居中

行内元素水平居中

<div class="container">
  <span>123</span>
</div>

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  **text-align: center; /* 水平居中 */**
}
span {
  background-color: pink;
}

单个 div（块级元素）水平居中

<div class="container">
  <div></div>
</div>

.container {
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
.container > div {
  width: 100px;
  height: 50px;
  background-color: pink;
  **margin: 0 auto; /* 水平居中 */**
}

多个 div 水平居中

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  gap: 10px; /* 可选：设置子元素之间的间距 */
}
.item {
  width: 100px;
  height: 100px;
  background-color: lightblue;
}

⭐️ 水平垂直居中

已知宽高

<div class="container">
  <div class="center"></div>
</div>

绝对定位 + margin

.container {
  position: relative; /* 相对定位 */
  width: 200px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
}

.center {
  **position: absolute; /* 绝对定位 */**
  **left: 0;
  top: 0;
  right: 0;
  bottom: 0;**
  width: 100px;
  height: 50px;
  **margin: auto; /* 0 auto 水平居中；auto 水平垂直居中 */**
  background-color: pink;
}

绝对定位 + 负 margin

.container {
  position: relative; /* 相对定位 */
  width: 200px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
}
.center {
  **position: absolute; /* 绝对定位 */
  left: 50%;
  top: 50%;
  margin: -25px 0 0 -50px; /* 外边距为自身宽高的一半 */**
  width: 100px;
  height: 50px;
  background-color: pink;
}

当被居中的元素是 inline 或者 inline-block 元素

<div class="container">
  <span>123</span>
</div>

.container {
  **display: table-cell;
  text-align: center;
  verticle-align: middle**;
  border: 1px solid black;
}
span {
  background-color: pink;
}

未知宽高

transform 的 translate

<div class="container">
  <div class="center"></div>
</div>

.container {
  position: relative; /* 相对定位 */
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
.center {
  **position: absolute; /* 绝对定位 */**
  **top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);**
  width: 50%;
  height: 50%;
  background-color: pink;
}

flex 布局

.container {
  **display: flex;
  justify-content: center;
  align-items: center;**
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
.center {
  width: 50%;
  height: 50%;
  background-color: pink;
}

有一个高度自适应的 div，里面有两个 div，一个高度 100px ，希望另一个填满剩下的高度

HTML:

<div class="outer">
  <div class="A"></div>
  <div class="B"></div>
</div>

方案1：calc

下方 vh 可更换为定高 px（例如 300px）

* { margin: 0; padding: 0; }
.outer {
  height: 100vh; /* 300px */
  background-color: pink;
}
.outer .A {
  height: 100px;
  background-color: grey;
}
.outer .B {
  **height: calc(100vh - 100px); /* 减去 A 的高度 */ /* 或者 calc(300px - 100px) */**
  background-color: yellow;
}

方案2：父相子绝1，B 设置 bottom 撑高，top 留 A 高度

* { margin: 0; padding: 0; }
.outer {
  position: relative;
  height: 100vh;
  background-color: pink;
}
.outer .A {
  height: 100px;
  background-color: grey;
}
.outer .B {
  position: absolute;
  **top: 100px; /* 留出 A 的高度 */**
  left: 0;
  right: 0;
  **bottom: 0; /* 上下撑开，把剩余高度给 B */**
  background-color: yellow;
}

方案3：父相子绝2，父利用 border-box 将 padding 包含在高度内

第一种：

• A 用 负 margin-top 填补 outer 的 padding-top

  * { margin: 0; padding: 0; }
  /* 
  	利用border-box将padding包含在高度内； 
  */
  .outer {
    position: relative;
    height: 100vh;
    **padding-top: 100px;**
    box-sizing: border-box;
    background-color: pink;
  }
  /* 
  	用负margin值将A子容器顶到页面顶部
  */
  .outer .A {
    **margin-top: -100px;**
    height: 100px;
    background-color: grey;
  }
  /* 
  	剩下的高度100%-100px就是B容器所谓的100%高了
  */
  .outer .B {
    **height: 100%;**
    background-color: yellow;
  }
  

第二种：

• A 用绝对定位，填补 outer 的 padding-top

  * { margin: 0; padding: 0; }
  .outer {
    position: relative;
    height: 100vh;
    padding-top: 100px;
    box-sizing: border-box;
    background-color: pink;
  }
  .outer .A {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-color: grey;
  }
  .outer .B {
    height: 100%;
    background-color: yellow;
  }
  

方案3：父相子绝3，B 绝对定位，利用 top 留给 A 的高度空间

* { margin: 0; padding: 0; }
.outer {
  position: relative;
  height: 100vh;
  background-color: pink;
}
.outer .A {
  height: 100px;
  background-color: grey;
}
.outer .B {
  position: absolute;
  top: 100px;
  left: 0;
  right: 0;
  bottom: 0; /* 上下撑开，把剩余高度给 B */
  background-color: yellow;
}

方案4：flex 布局

* { margin: 0; padding: 0; }
.outer {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: pink;
}
.outer .A {
  height: 100px;
  background-color: grey;
}
.outer .B {
  flex: 1;
  background-color: yellow;
}

⭐️ 两列布局

左列定宽，右列自适应

HTML:

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

方案1：float + overflow

原理：

• left 左浮动，right 触发 BFC 达到自适应

* { margin: 0; padding: 0; }
.container {
  height: 100vh;
  background-color: pink;
}
.left {
  float: left;
  width: 100px;
  background-color: grey;
}
.right {
  **overflow: hidden; /* 触发bfc达到自适应 */**
  height: 100%;
  background-color: yellow;
}

方案2：float + margin

原理：

• left 左浮动，脱离文档流，right 为了不被 left 挡住，设置 margin-left 大于等于 left 的宽度达到视觉上的两栏布局

* { margin: 0; padding: 0; }
.container {
  height: 100vh;
  background-color: pink;
}
.left {
  float: left;
  width: 100px;
  background-color: grey;
}
.right {
  **margin-left: 100px; /* 设置间隔，大于等于#left的宽度 */**
  height: 100%;
  background-color: yellow;
}

方案3：table & table-cell

原理：

• 利用单元格自动分配宽度

* { margin: 0; padding: 0; }
.container {
  display: table;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.left {
  **display: table-cell; /* 利用单元格自动分配宽度 */**
  width: 100px;
  background-color: grey;
}
.right {
  display: table-cell;
  height: 100%;
  background-color: yellow;
}

方案4：父相子绝

* { margin: 0; padding: 0; }
.container {
  position: relative;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.left {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  background-color: grey;
}
.right {
  position: absolute;
  top: 0;
  left: 100px; /* 值大于等于#left的宽度 */
  right: 0;
  height: 100%;
  background-color: yellow;
}

方案5：flex 布局

* { margin: 0; padding: 0; }
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.left {
  **flex-basis: 100px;**
  height: 100%;
  background-color: grey;
}
.right {
  **flex: 1;**
  height: 100%;
  background-color: yellow;
}

左列不定宽，右列自适应

方案1：float + overflow

* { margin: 0; padding: 0; }
.container {
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.left {
  **float: left;**
  background-color: grey;
}
.right {
  **overflow: hidden;**
  height: 100%;
  background-color: yellow;
}

方案2：flex 布局

* { margin: 0; padding: 0; }
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.left {
  background-color: grey;
}
.right {
  flex: 1;
  height: 100%;
  background-color: yellow;
}

⭐️ 三列布局

两侧定宽，中间自适应

圣杯布局

<div class="container">
  **<div class="center"></div>** <!-- 1. 让中间第一，这样浮动的时候它会先占据100%宽 -->
  <div class="left"></div>
  <div class="right"></div>
</div>

* { margin: 0; padding: 0; }
.container {
  **min-width: 200px; /* 8. 为了不让布局被破坏，设置最小宽度为左栏宽度 */**
  height: 100vh;
  **padding: 0 100px 0 200px; /* 2. 父容器左右留出固定padding */**
  background-color: rgba(0, 255, 255, 0.3);
}
.center, .left, .right {
  **float: left; /* 3. 三栏全部左浮动 */**
  height: 100px;
}
.center {
  **width: 100%; /* 4. 先让中间栏铺满容器 */**
  background-color: rgba(0, 0, 0, 0.3);
}
.left {
  **position: relative; /* 6.1 为了让left移到最左边,设置相对定位 */
  margin-left: -100%; /* 5. 让被挤到center下方的left左移整个容器的宽度，此时左上角与center重叠 */
  left: -200px; /* 6.2 然后相对自己左移自已宽度的单位，使自己移动到最左边 */**
  width: 200px;
  background-color: rgba(255, 0, 0, 0.3);
}
.right {
  **margin-right: -100px; /* 7. 设置一个负自己宽度的margin-right。让其去最右边 */**
  width: 100px;
  background-color: rgba(0, 0, 255, 0.3);
}

1. 设置 三栏 左浮动，center 100%，.container 留出左右侧栏宽度之后：

1. 给左栏设置 margin-left: -100% 使其回到第一行：

1. 给左栏定位，使其回到最左侧：

1. 给右侧设置 margin-right: -100px ，使其回到最右侧：

1. 最后为了防止布局被破坏，给 .container 设置 margin-left: 左栏宽度

双飞翼布局

<div class="container">
  <div class="center"> <!-- 1. 让center排第一，这样浮动的时候它会先占据100%宽 -->
    **<div></div>**				 <!-- 2. 嵌套一个div，用来装真正的中间内容 -->
  </div>
  <div class="left"></div>
  <div class="right"></div>
</div>

* { margin: 0; padding: 0; }
.container {
  height: 100vh;
  background-color: rgba(0, 255, 255, 0.3);
}
.center, .left, .right {
  **float: left; 					/*3. 子容器全部左浮动 */**
  height: 100px;
}
.center {
  width: 100%;					/* 4. 中间容器100%，此时会把左右挤到第二行 */
  background-color: rgba(0, 0, 0, 0.3);
}
.center div {
  height: 100%;
  **margin: 0 100px 0 200px;**
  /* 7. 此时center的左右分别有200和100宽与left，right重叠。所以让center子容器左右margin抵消 */
}
.left {
  width: 200px;
  **margin-left: -100%; 	/* 5. 左移容器宽度100%个单位，就把自己排在了center前面 */**
  background-color: rgba(255, 0, 0, 0.3);
}
.right {
  width: 100px;
  **margin-left: -100px;  /* 6. 同样左移自身宽度的单位，让right也回到第一行 */**
  background-color: rgba(0, 0, 255, 0.3);
}

1. 初始布局，左中右 float: left ，中间 width: 100%

1. 左侧 margin-left: -100% 贴住容器最左侧：

1. 右侧 margin-left: -100px 贴住容器最右侧：

1. 给中间容器的子容器设置 左右 margin 抵消被遮盖部分：

中间定宽，两侧等宽自适应缩放

要求：

1. 三栏布局，A栏，B栏和C栏，排列从左到右
2. B栏宽度为800，A和C栏自动缩放
3. A栏和C栏等宽

flex

<div class="container">
  <div class="left"></div>
  <div class="center"></div>
  <div class="right"></div>
</div>

* { margin: 0; padding: 0;}
.container {
  display: flex;
  justify-content: center;
  height: 100vh;
  background-color: pink;
}
.left {
  **flex: 1;**
  background-color: grey;
}
.center {
  **flex-basis: 800px;**
  background-color: red;
}
.right {
  **flex: 1;**
  background-color: blue;
}

table + table-cell

* { margin: 0; padding: 0; }
.container {
  **display: table;**
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.left, .center, .right {
  **display: table-cell;**
}
.left {
  background-color: grey;
}
.center {
  **width: 800px;**
  background-color: red;
}
.right {
  background-color: blue;
}

float + 负 margin

<div class="container">
  <div class="left">
    <div class="inner">A</div>
  </div>
  <div class="center">B</div>
  <div class="right">
    <div class="inner">C</div>
  </div>
</div>

借助于负的 margin 来实现，首先我们在中间列定好固定值，因为此值是不会在改变的，接着对其进行左浮动；

那么关键点主是在左右边栏设置地方，这种方法是将其都进行50%的宽度设置，并加上中负的左边距，此负的左边距最理想的值是中间栏宽度的一半加上1px，比如说此例中是"540px/2+1"也就是说他们都有一个"margin-left: -271px",这样一来，左右边栏内容无法正常显示，那是因为对他们进行了负的左边距操作，现在只需要在左右边栏的内层div.inner将其拉回来，就OK了 。

这种方法如果在 ie 下会存在布局混乱的 bug，可以将 div#right 和 div#left 中的 width 值稍作修改

* { margin: 0; padding: 0;}
.container {
  width: 100vw;
  height: 100vh;
  background-color: pink;
}
.left, .center, .right {
  float: left;
  color: white;
  font-size: 50px;
}
.left {
  width: 50%;
  *width: 49.9%;
  margin: 0 0 0 -401px;
  background-color: grey;
}
.left .inner {
  margin: 0 0 0 401px;
}
.center {
  width: 800px;
  background-color: red;
}
.right {
  width: 50%;
  *width: 49.9%;
  margin: 0 -401px 0 0;
  background-color: blue;
}
.right .inner {
  margin: 0 401px 0 0;
}

三列等分布局，有 5 个 item，如何三个等分一排，剩余两个排第二行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .container {
        display: flex;
        flex-wrap: wrap;
      }
      .item {
        flex-basis: 33.33%;
        background-color: pink;
        /* 如果不需要九宫格，下面两行可以删除 */
        height: 0;
        padding-bottom: 33.33%;
      }
      .item:nth-child(even) {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="item">1</div>
      <div class="item">2</div>
      <div class="item">3</div>
      <div class="item">4</div>
      <div class="item">5</div>
    </div>
  </body>
</html>

布局的几种方式