3 years ago · 5c939df8f2
--- a/CSS垂直居中布局方案/CSS-Grid.html
+++ b/CSS垂直居中布局方案/CSS-Grid.html
@@ -0,0 +1,37 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title> CSS Grid</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      display: grid;
			
 
				+      /* grid-template-columns: 1fr 1fr 1fr; */
			
 
				+    }
			
 
				+
			
 
				+    .two {
			
 
				+      background: orange;
			
 
				+    }
			
 
				+
			
 
				+    .one,
			
 
				+    .three {
			
 
				+      background: skyblue;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1> CSS Grid</h1>
			
 
				+  <div id="box">
			
 
				+    <div class="one"></div>
			
 
				+    <div class="two">target item</div>
			
 
				+    <div class="three"></div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/display:table;和vertical-align:middle;对容器里的文字进行垂直居中.html
+++ b/CSS垂直居中布局方案/display:table;和vertical-align:middle;对容器里的文字进行垂直居中.html
@@ -0,0 +1,69 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>display: table; 和 vertical-align: middle; 对容器里的文字进行垂直居中</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      display: table;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      display: table-cell;
			
 
				+      vertical-align: middle;
			
 
				+    }
			
 
				+
			
 
				+    #box2 {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      display: table;
			
 
				+    }
			
 
				+
			
 
				+    .child2 {
			
 
				+      display: table-cell;
			
 
				+      vertical-align: baseline;
			
 
				+      border-right: 1px solid orange;
			
 
				+    }
			
 
				+
			
 
				+    .child2:first-child {
			
 
				+      font-size: 30px;
			
 
				+    }
			
 
				+
			
 
				+    .child2:last-child {
			
 
				+      font-size: 50px;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>display: table; 和 vertical-align: middle; 对容器里的文字进行垂直居中</h1>
			
 
				+  <div id="box">
			
 
				+    <div id="child">test vertical align</div>
			
 
				+  </div>
			
 
				+  <pre>
			
 
				+    vertical-align 属性只对拥有 valign 特性的 html 元素起作用，例如表格元素中的 <td> <th> 等等，而像 &lt;div&gt; &lt;span&gt; 这样的元素是不行的。
			
 
				+    valign 属性规定单元格中内容的垂直排列方式，语法：<td valign="value">，value的可能取值有以下四种：
			
 
				+    
			
 
				+    top：对内容进行上对齐
			
 
				+    middle：对内容进行居中对齐
			
 
				+    bottom：对内容进行下对齐
			
 
				+    baseline：基线对齐
			
 
				+    
			
 
				+    关于 baseline：基线是一条虚构的线，在一行文本中，大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。该值的效果在文本的字号各不相同时效果会更好，请看下例：
			
 
				+      
			
 
				+  </pre>
			
 
				+  <div id="box2">
			
 
				+    <div class="child2">glory</div>
			
 
				+    <div class="child2">glad</div>
			
 
				+    <div class="child2">align</div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/flex布局.html
+++ b/CSS垂直居中布局方案/flex布局.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>flex布局</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+        width: 300px;
			
 
				+        height: 300px;
			
 
				+        background: #ddd;
			
 
				+        display: flex;
			
 
				+        align-items: center;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+<body>
			
 
				+  <h1>flex布局</h1>
			
 
				+  <pre>
			
 
				+    这种方式同样适用于块级元素
			
 
				+    flex布局请参考阮一峰《felx布局教程》
			
 
				+    flex也就是flexible，意为灵活的、柔韧的、易弯曲的。
			
 
				+    元素可以通过设置 display:flex; 将其指定为 flex 布局的容器，指定好了容器之后再为其添加 align-items 属性，该属性定义项目在交叉轴（这里是纵向轴）上的对齐方式，可能的取值有五个，分别如下：
			
 
				+
			
 
				+    flex-start:：交叉轴的起点对齐
			
 
				+    flex-end：交叉轴的终点对齐
			
 
				+    center：交叉轴的中点对齐
			
 
				+    baseline：项目第一行文字的基线对齐
			
 
				+    stretch（该值是默认值）：如果项目没有设置高度或者设为了auto，那么将占满整个容器的高度
			
 
				+  </pre>
			
 
				+  <div id="box">test vertical align</div>
			
 
				+</body>
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/line-height和vertical-align对图片进行垂直居中.html
+++ b/CSS垂直居中布局方案/line-height和vertical-align对图片进行垂直居中.html
@@ -0,0 +1,36 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>line-height 和 vertical-align 对图片进行垂直居中</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      line-height: 300px;
			
 
				+    }
			
 
				+
			
 
				+    #box img {
			
 
				+      width: 200px;
			
 
				+      height: 200px;
			
 
				+      background-color: #fff;
			
 
				+      vertical-align: middle;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>line-height 和 vertical-align 对图片进行垂直居中</h1>
			
 
				+  <p>
			
 
				+
			
 
				+  </p>
			
 
				+  <div id="box">
			
 
				+    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png">
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/line-height对单行文本进行垂直居中.html
+++ b/CSS垂直居中布局方案/line-height对单行文本进行垂直居中.html
@@ -0,0 +1,27 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>使用 line-height 对单行文本进行垂直居中</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      line-height: 300px;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>使用 line-height 对单行文本进行垂直居中</h1>
			
 
				+  <p>
			
 
				+    要注意的是，line-height (行高) 的值不能设为 100%，我们来看看官方文档中给出的关于 line-height 取值为百分比时候的描述：“基于当前字体尺寸的百分比行间距”。也就是说，这里的百分比并不是相对于容器元素尺寸而言的，而是相对于字体尺寸。
			
 
				+  </p>
			
 
				+  <div id="box">test vertical align</div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/padding实现子元素的垂直居中.html
+++ b/CSS垂直居中布局方案/padding实现子元素的垂直居中.html
@@ -0,0 +1,35 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>padding实现子元素的垂直居中</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      background: #ddd;
			
 
				+      padding: 100px 0;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      width: 200px;
			
 
				+      height: 100px;
			
 
				+      background: orange;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>padding实现子元素的垂直居中</h1>
			
 
				+  <p>
			
 
				+    这种实现方式非常简单，给父元素设置相等的上下内边距，子元素自然是垂直居中的，当然这时候父元素是不能设置高度的，要让它自动被填充起来，除非设置了一个正好等于上内边距+子元素高度+下内边距的值，否则无法精确垂直居中。
			
 
				+    这种方式看似没有什么技术含量，但其实在某些场景下也是非常好用的。
			
 
				+  </p>
			
 
				+  <div id="box">
			
 
				+    <div id="child"></div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/弹性布局.html
+++ b/CSS垂直居中布局方案/弹性布局.html
@@ -0,0 +1,51 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>弹性布局</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      display: flex;
			
 
				+      flex-direction: column;
			
 
				+      justify-content: center;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      width: 300px;
			
 
				+      height: 100px;
			
 
				+      background: orange;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>弹性布局</h1>
			
 
				+  <pre>
			
 
				+    这种方式也是首先给父元素设置 display:flex; 设置好之后改变主轴的方向 flex-direction: column; 该属性可能的取值有四个，分别如下：
			
 
				+  
			
 
				+    row（该值为默认值）：主轴为水平方向，起点在左端
			
 
				+    row-reverse：主轴为水平方向，起点在右端
			
 
				+    column：主轴为垂直方向，起点在上沿
			
 
				+    column-reverse：主轴为垂直方向，起点在下沿
			
 
				+
			
 
				+    justify-content 属性定义了项目在主轴上的对齐方式，可能的取值有五个，分别如下（具体的对齐方式与主轴的方向有关，以下假定主轴方向为默认的从左到右）：
			
 
				+
			
 
				+    flex-start（该值是默认值）：左对齐
			
 
				+    flex-end：右对齐
			
 
				+    center：居中对齐
			
 
				+    space-between：两端对齐，各个项目之间的间隔均相等
			
 
				+    space-around：各个项目两侧的间隔相等
			
 
				+
			
 
				+  </pre>
			
 
				+  <div id="box">
			
 
				+    <div id="child"></div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/绝对定位和transform.html
+++ b/CSS垂直居中布局方案/绝对定位和transform.html
@@ -0,0 +1,33 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>使用绝对定位和transform</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      position: relative;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      background: orange;
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      transform: translate(0, -50%);
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>使用绝对定位和transform</h1>
			
 
				+  <p>这种方法有一个明显的好处就是不必提前知道被居中元素的尺寸了，因为 transform 中 translate 偏移的百分比就是相对于元素自身的尺寸而言的。</p>
			
 
				+  <div id="box">
			
 
				+    <div id="child">test vertical align</div>
			
 
				+  </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/绝对定位和负外边距对块级元素进行垂直居中.html
+++ b/CSS垂直居中布局方案/绝对定位和负外边距对块级元素进行垂直居中.html
@@ -0,0 +1,36 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>使用绝对定位和负外边距对块级元素进行垂直居中</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      position: relative;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      width: 150px;
			
 
				+      height: 100px;
			
 
				+      background: orange;
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      margin: -50px 0 0 0;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>使用绝对定位和负外边距对块级元素进行垂直居中</h1>
			
 
				+  <p>这个方法兼容性不错，但是有一个小缺点：必须提前知道被居中块级元素的尺寸，否则无法准确实现垂直居中。</p>
			
 
				+  <div id="box">
			
 
				+    <div id="child"></div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/绝对定位和负外边距进行垂直居中.html
+++ b/CSS垂直居中布局方案/绝对定位和负外边距进行垂直居中.html
@@ -0,0 +1,36 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>使用绝对定位和负外边距进行垂直居中</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      position: relative;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      width: 50%;
			
 
				+      height: 30%;
			
 
				+      background: orange;
			
 
				+      position: absolute;
			
 
				+      top: 50%;
			
 
				+      margin: -15% 0 0 0;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>使用绝对定位和负外边距进行垂直居中</h1>
			
 
				+  <p>这种方式的原理实质上和前两种相同。补充的一点是：margin 的取值也可以是百分比，这时这个值规定了该元素基于父元素尺寸的百分比，可以根据实际的使用场景来决定是用具体的数值还是用百分比。</p>
			
 
				+  <div id="box">
			
 
				+    <div id="child">test vertical align</div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/绝对定位结合margin:auto.html
+++ b/CSS垂直居中布局方案/绝对定位结合margin:auto.html
@@ -0,0 +1,40 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>绝对定位结合margin: auto</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+      position: relative;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      width: 200px;
			
 
				+      height: 100px;
			
 
				+      background: orange;
			
 
				+      position: absolute;
			
 
				+      top: 0;
			
 
				+      bottom: 0;
			
 
				+      margin: auto;
			
 
				+      line-height: 100px;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>绝对定位结合margin: auto</h1>
			
 
				+  <p>
			
 
				+    这种实现方式的两个核心是：把要垂直居中的元素相对于父元素绝对定位，top和bottom设为相等的值，我这里设成了0，当然也可以设为 99999px 或者 -99999px 无论什么，只要两者相等就行，这一步做完之后再将要居中元素的 margin 属性值设为 auto，这样便可以实现垂直居中了。
			
 
				+被居中元素的宽高也可以不设置，但不设置的话就必须是图片这种自身就包含尺寸的元素，否则无法实现。
			
 
				+  </p>
			
 
				+  <div id="box">
			
 
				+    <div id="child">test vertical align</div>
			
 
				+  </div>
			
 
				+</body>
			
 
				+
			
 
				+</html>
			
--- a/CSS垂直居中布局方案/设置第三方基准.html
+++ b/CSS垂直居中布局方案/设置第三方基准.html
@@ -0,0 +1,40 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+<head>
			
 
				+  <meta charset="UTF-8">
			
 
				+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
			
 
				+  <title>设置第三方基准</title>
			
 
				+  <style>
			
 
				+    #box {
			
 
				+      width: 300px;
			
 
				+      height: 300px;
			
 
				+      background: #ddd;
			
 
				+    }
			
 
				+
			
 
				+    #base {
			
 
				+      height: 50%;
			
 
				+      background: orange;
			
 
				+    }
			
 
				+
			
 
				+    #child {
			
 
				+      height: 100px;
			
 
				+      background: rgba(131, 224, 245, 0.6);
			
 
				+      margin-top: -50px;
			
 
				+    }
			
 
				+  </style>
			
 
				+</head>
			
 
				+
			
 
				+<body>
			
 
				+  <h1>设置第三方基准</h1>
			
 
				+  <p>
			
 
				+    这种方式也非常简单，首先设置一个高度等于父元素高度一半的第三方基准元素，这时该基准元素的底边线就是父元素纵向上的中分线，做完这些之后再给要垂直居中的元素设置一个 margin-top 属性，值的大小是它自身高度的一半取负，则实现垂直居中。
			
 
				+  </p>
			
 
				+  <div id="box">
			
 
				+    <div id="base"></div>
			
 
				+    <div id="child"></div>
			
 
				+  </div>
			
 
				+
			
 
				+</body>
			
 
				+
			
 
				+</html>