导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

水平居中

行内元素水平居中

<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 布局