垂直居中准则容器中内容居中的最佳方式是根据具体场景考虑不同的因素。在做出判断之前，请一一问自己以下问题，直到找到合适的解决方案。1、可以使用自然高度容器吗？在容器的顶部和底部添加相等的填充以使内容居中。2.容器是否需要指定高度或避免填充？使用display:table-cell和vertical-align:middle作为容器。3.我可以使用Flexbox吗？如果不需要支持IE9，可以使用Flexbox来居中内容。4.容器中是否只有一行文字？将较大的行高设置为等于理想的容器高度。这将扩展容器的高度以适应行高。如果内容不是行内元素，可以设置为inline-block。5.你知道容器和内容物的高度吗？绝对定位内容。（只有在前面提到的方法都不起作用时才推荐使用这种方法。）6.不知道内部元素的高度？将变换与绝对定位相结合。（同样，只有在上述方法均无效时才推荐使用此方法。）7.如果您不确定，请参阅howtocenterincss网站。这个网站很不错，可以根据自己的场景填几个选项，然后会生成一个垂直居中的代码。元素widthexpandswidthexpands向上移动，重叠它上面的元素，拉它下面的元素，指定宽度的块元素向左移动，没有效果，向上移动，重叠它上面的元素，拉它下面的元素超过未指定的内联元素宽度的向左移动，重叠在它左边的元素，拉动它右边的元素向上移动，重叠它上面的元素，拉动它下面的元素向左移动。指定宽度的内联元素向左移动，与它重叠的左边元素将其右边的元素拉过来并向上移动。重叠它上面的一个元素，拉它下面的元素。负边距不常用，但在某些情况下很有用，尤其是在创建列布局时。什么时候。但应避免频繁使用，否则页面样式会失控。MarginCollapse1.当上边距和/或下边距相邻时，它们重叠，导致单一边距。2.只会折叠上下边距，不会折叠左右边距。3.弹性子元素的外边距不会塌陷，防止外边距塌陷：1.对容器使用overflow:auto（或不可见值），防止内层元素的外边距塌陷外边距在容器外。这种方式副作用最小。2.在两个边距之间添加边框或填充以防止它们折叠。3.如果容器是浮动元素、行内块、绝对定位或固定定位，margin不会塌陷在它外面。4、使用Flexbox布局时，灵活布局中的元素之间不会出现margincollapse。网格布局（gridlayout）也是一样的。需要注意的几点1.百分比是指元素的容器块的大小，但容器的高度通常由子元素的高度决定。这将导致浏览器无法处理的无限循环，因此它会忽略该声明。要使百分比高度起作用，必须为父元素定义明确的高度。2.vertical-align语句只影响行内元素或table-cell元素。对于行内元素，它控制元素与同一行中其他元素的对齐方式。对于显示为表格单元格的元素，vertical-align控制单元格内内容的对齐方式。
