垂直居中指南

在容器里让内容居中最好的形式是依据特定场景思考不同因素。做出判断前，先一一询问本人以下几个问题，直到找到适合的解决办法。

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管制了内容在单元格内的对齐。