、| )。
+
+> 第二步：为这个 table 设置 “左右 margin 居中”（这个和定宽块状元素的方法一样）。
+
+```html
+
+```
+
+```css
+.container{
+ text-align:center;
+}
+.container ul{
+ list-style:none;
+ margin:0;
+ padding:0;
+ display:inline;
+}
+.container li{
+ margin-right:8px;
+ display:inline;
+}
+```
+
+> 这种方法相比第一种方法的优势是不用增加无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，所以少了一些功能，比如设定长度值。
+
+> 设置 position:relative 和 left:50%
+
+> 通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。举例如下：
+
+```html
+
+
+
+```
+
+```css
+.container{
+ float:left;
+ position:relative;
+ left:50%
+}
+
+.container ul{
+ list-style:none;
+ margin:0;
+ padding:0;
+
+ position:relative;
+ left:-50%;
+}
+.container li{float:left;display:inline;margin-right:8px;}
+```
+
+> 这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度，但它的缺点是设置了 position:relative，带来了一定的副作用。
+
+> 这三种方法使用得都非常广泛，各有优缺点，具体选用哪种方法，可以视具体情况而定。
+
+**本文转载自 陈浩的个人博客，《CSS 水平居中设置》**
\ No newline at end of file
diff --git "a/docs/04.Web/06.CSS\345\236\202\347\233\264\345\261\205\344\270\255\350\256\276\347\275\256.md" "b/docs/04.Web/06.CSS\345\236\202\347\233\264\345\261\205\344\270\255\350\256\276\347\275\256.md"
new file mode 100644
index 0000000..3ee9276
--- /dev/null
+++ "b/docs/04.Web/06.CSS\345\236\202\347\233\264\345\261\205\344\270\255\350\256\276\347\275\256.md"
@@ -0,0 +1,77 @@
+# CSS 垂直居中设置
+
+## 父元素高度确定的单行文本
+
+> 父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。如下代码
+
+```html
+
+ hi,imooc!
+
+```
+
+```css
+.container{
+ height:100px;
+ line-height:100px;
+ background:#999;
+}
+```
+
+## 父元素高度确定的多行文本
+
+> 父元素高度确定的多行文本、图片、块状元素的竖直居中的方法有两种
+
+### 方法一
+
+> 使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle
+
+> 说到竖直居中，css 中有一个用于竖直居中的属性 vertical-align，但这个样式只有在父元素为 td 或 th 时，才会生效。所以又要插入 table 标签了。下面看一下例子：
+
+```html
+
+
+
+ 看我是否可以居中。
+ 看我是否可以居中。
+ 看我是否可以居中。
+ 看我是否可以居中。
+ |
+
+```
+
+```css
+table td{height:500px;background:#ccc}
+```
+
+> 因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了
+
+### 方法二
+
+> 在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell，激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式
+
+```html
+
+
+ 看我是否可以居中。
+ 看我是否可以居中。
+ 看我是否可以居中。
+ 看我是否可以居中。
+ 看我是否可以居中。
+
+
+ One
+ Two
+ Three
+
has
+
extra
+
text
+
+
+ One
+ Two
+ Three
+
has
+
extra
+
text
+
+
+
+
+
+
+```
+
+当浏览器遇到`
+
+
+
+
+
+ Hello world!
+
+ |