feat: 垂直居中

bilibili-lab · Mar 26, 2021 · eae0adf · eae0adf
1 parent b14e231
commit eae0adf
Show file tree

Hide file tree

Showing 6 changed files with 216 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -25,15 +25,19 @@
 
 最大的心愿就是完成一本书。 -->
 
+CSS篇
+
+- [垂直居中](/docs/md/1.md)
+
 基础篇
 
-- [如何实现深浅拷贝](/docs/JS/1.md)
-- [手写实现 apply、call、bind](/docs/JS/2.md)
+- [如何实现深浅拷贝](/docs/md/1.md)
+- [手写实现 apply、call、bind](/docs/md/2.md)
 
 浏览器篇
 
-- [浏览器同源策略与跨域解决方案](/docs/JS/3.md)
-- [浏览器缓存策略](/docs/JS/3.md)
+- [浏览器同源策略与跨域解决方案](/docs/md/3.md)
+- [浏览器缓存策略](/docs/md/4.md)
 
 <!-- ## 数据结构与算法
 

diff --git a/docs/JS/1.md → docs/md/1.md b/docs/JS/1.md → docs/md/1.md
diff --git a/docs/JS/2.md → docs/md/2.md b/docs/JS/2.md → docs/md/2.md
diff --git a/docs/JS/3.md → docs/md/3.md b/docs/JS/3.md → docs/md/3.md
diff --git a/docs/JS/4.md → docs/md/4.md b/docs/JS/4.md → docs/md/4.md
@@ -1,3 +1,4 @@
+# 浏览器缓存策略
 
 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f16a0e40effd4ff1bc95bde49e3706c0~tplv-k3u1fbpfcp-watermark.image)
 

diff --git a/docs/md/5.md b/docs/md/5.md
@@ -0,0 +1,207 @@
+
+# 垂直居中
+
+`CSS`让人头疼的问题就是`垂直居中`。实现`垂直居中`好几种方式，但每一种方式都有一定的局限性,所以`垂直居中`可以根据实际的业务场景来使用。
+
+在容器里让内容居中最好的方式是根据特定场景考虑不同因素。做出判断前，先逐个询问自己以下几个问题，直到找到合适的解决办法。
+
+- 容器里面的内容只有一行文字？
+- 容器自然高度？
+- 容器需要指定高度或者避免使用内边距？
+- 使用`Flexbox`布局？
+- 容器和内容的高度都知道？
+- 不知道内部元素的高度？
+
+## 容器里面的内容只有一行文字
+
+设置一个大的行高，让它等于理想的容器高度。这样会让容器高度扩展到能够容纳行高。如果内容不是行内元素，可以设置为`inline-block`。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+    }
+    div {
+      height: 60px;
+      background-color: #1888fa;
+      color: white;
+    }
+    span {
+      line-height: 60px;
+    }
+  </style>
+  <body>
+    <div>
+      <span>测试居中</span>
+    </div>
+  </body>
+</html>
+```
+
+## 容器自然高度
+
+`CSS`中最简单的`垂直居中`方法是给容器相等的上下内边距，让容器和内容自行决定自己的高度。
+
+看下面的例子, 通过设置`padding-top` 和`padding-bottom`相等的值，让内容在父容器垂直剧中。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+   <style>
+      * {
+        padding: 0;
+        margin: 0;
+      }
+      div {
+        padding-top: 20px;  
+        padding-bottom: 20px;
+        background-color: #1888FA;
+        color: white;
+      }
+    </style>
+    <body>
+      <div>
+         <span>测试居中</span>
+      </div>
+    </body>
+</html>
+```
+
+## 容器需要指定高度或者避免使用内边距
+
+可以给父容器设置`display: table`, 子元素设置`display: table-cell;
+      vertical-align: middle;`, 让子元素来垂直居中。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+    }
+    div {
+      width: 100%;
+      height: 60px;
+      background-color: #1888fa;
+      color: white;
+      display: table;
+    }
+    span {
+      display: table-cell;
+      vertical-align: middle;
+    }
+  </style>
+  <body>
+    <div>
+      <span>测试居中</span>
+    </div>
+  </body>
+</html>
+```
+
+## 使用 FlexBox
+
+使用`flex`布局在做居中的时候非常容易。
+
+```js
+<!DOCTYPE html>
+<html lang="en">
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+    }
+    div {
+      height: 60px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #1888fa;
+      color: white;
+    }
+  </style>
+  <body>
+    <div>
+      <span>测试居中</span>
+    </div>
+  </body>
+</html>
+```
+
+## 容器和内容的高度都知道
+
+将内容使用绝对定位， 只有其他方法都无法实现，才推荐这种。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+    }
+    div {
+      height: 100px;
+      background-color: #1888fa;
+      color: white;
+      position: relative;
+    }
+    span{
+      position: absolute;
+      top: 35px;
+      display: inline-block;
+      height: 30px;
+    }
+  </style>
+  <body>
+    <div>
+      <span>测试居中</span>
+    </div>
+  </body>
+</html>
+```
+
+## 不知道内部元素的高度
+
+将内容使用`绝对定位` + `transform`， 只有其他方法都无法实现，才推荐这种。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <style>
+    * {
+      padding: 0;
+      margin: 0;
+    }
+    div {
+      height: 100px;
+      background-color: #1888fa;
+      color: white;
+      position: relative;
+    }
+    span {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  </style>
+  <body>
+    <div>
+      <span>测试居中</span>
+    </div>
+  </body>
+</html>
+```
+
+## 总结
+
+应结合实际的业务场景来具体使用哪种方式。
+
+## 参考
+
+[How to Center in CSS](http://howtocenterincss.com/)
Original file line number	Diff line number	Diff line change
		@@ -1,3 +1,4 @@
		# 浏览器缓存策略

		![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f16a0e40effd4ff1bc95bde49e3706c0~tplv-k3u1fbpfcp-watermark.image)

Expand Down