共计 1247 个字符，预计需要花费 4 分钟才能阅读完成。
垂直居中指南
在容器里让内容居中最好的形式是依据特定场景思考不同因素。做出判断前，先一一询问本人以下几个问题，直到找到适合的解决办法。
1. 能够用一个天然高度的容器吗？给容器加上相等的高低内边距让内容居中。2. 容器须要指定高度或者防止应用内边距吗？对容器应用 display: table-cell 和 vertical-align: middle。3. 能够用 Flexbox 吗？如果不须要反对 IE9，能够用 Flexbox 居中内容。4. 容器外面的内容只有一行文字吗？设置一个大的行高，让它等于现实的容器高度。这样会让容器高度扩大到可能包容行高。如果内容不是行内元素，能够设置为 inline-block。5. 容器和内容的高度都晓得吗？将内容相对定位。（只有当后面提到的办法都有效时才举荐这种形式。）6. 不晓得外部元素的高度？用相对定位联合变形（transform）。（还是只有当后面提到的办法都有效时才举荐该办法。）7. 还不确定的话，参考 howtocenterincss 网站。这个网站很不错，能够依据本人的场景填写几个选项，而后它会相应地生成垂直居中的代码
负外边距
| 左负边距 | 右负边距 | 上负边距 | 下负边距 | |
|---|---|---|---|---|
| 未指定 width 的块状元素 | width 扩充 | width 扩充 | 向上挪动，与它下面的元素重叠 | 将它上面的元素拉过来 |
| 指定 width 的块状元素 | 向左挪动 | 没有作用 | 向上挪动，与它下面的元素重叠 | 将它上面的元素拉过来 |
| 未指定 width 的内联元素 | 向左挪动，与它右边的元素重叠 | 将它左边的元素拉过来 | 向上挪动，与它下面的元素重叠 | 将它上面的元素拉过来 |
| 指定 width 的内联元素 | 向左挪动，与它右边的元素重叠 | 将它左边的元素拉过来 | 向上挪动，与它下面的元素重叠 | 将它上面的元素拉过来 |
负外边距并不罕用，然而在某些场景下很实用，尤其是当创立列布局的时候。不过该当防止频繁应用，不然网页的款式就会失控。
外边距折叠
1. 当顶部和 / 或底部的外边距相邻时，就会重叠，产生单个外边距。2. 只有高低外边距会产生折叠，左右外边距不会折叠。3. 弹性子元素的外边距不会折叠
避免外边距折叠:
1. 对容器应用 overflow: auto（或者非 visible 的值），避免外部元素的外边距跟容器内部的外边距折叠。这种形式副作用最小。2. 在两个外边距之间加上边框或者内边距，避免它们折叠。3. 如果容器为浮动元素、内联块、相对定位或固定定位时，外边距不会在它里面折叠。4. 当应用 Flexbox 布局时，弹性布局内的元素之间不会产生外边距折叠。网格布局（grid 布局）同理。一些留神点
1. 百分比参考的是元素容器块的大小，然而容器的高度通常是由子元素的高度决定的。这样会造成死循环，浏览器解决不了，因而它会疏忽这个申明。要想让百分比高度失效，必须给父元素明确定义一个高度。2. vertical-align 申明只会影响行内元素或者 table-cell 元素。对于行内元素，它管制着该元素跟同一行内其余元素之间的对齐关系。对于显示为 table-cell 的元素，vertical-align 管制了内容在单元格内的对齐。
正文完
