Verticallycentersingle-linetextVerticallycenterofheightofparentelementisauto如果未设置父元素的高度，则默认将子元素紧紧包裹。如果父元素设置padding-top和padding-bottom相同，这本身就是垂直居中的效果，但是当子元素不占一行，而是inline元素和inline-block元素合为一行时，比如下面这个例子：inline元素和inline-block元素显示在同一行，因为图片的inline-block元素本身是有高度的，会把整行拉长，但是文字和图片仍然在一条线上。如果仔细观察，会发现图片本身并没有与文字底部对齐。这是因为inline-block默认有vertical-align属性，它的值默认为baseline，即图片和文字的基线对齐方式，注意vertical-align只对inline-block元素有效，在本例中，只需要为inline-block元素设置vertical-align:middle就可以实现垂直居中。效果如下：父元素的高度为固定值。这种情况下，只需要将父元素上的line-height属性设置为等于父元素的height属性（line-height=height）即可。这只适用于单行文本，父元素的高度是固定的，对于多行文本你无能为力。父元素的高度是固定的，子元素的高度是块元素。子元素的高度是固定的。在这种情况下，可以使用绝对定位来实现垂直居中。缺点是它脱离了正常的文档流。.parent{位置：相对；}.child{位置：绝对；顶部：50%；高度：200px；margin-top:-100px;}//或者下面的实现方法.child{position:absolute;顶部：0；底部：0；高度：200px；margin:auto0;}子元素的高度不固定。在这种情况下，子元素可以是块级元素或非块级元素。.parent{显示：表格天花板；高度：200px；vetical-align:middle;}这种方法只能在IE8及以后的版本中使用，因为display:table-ceil属性的兼容性不够好。.parent{位置：相对；}.child{位置：绝对；顶部：50%；transform:translateY(-50%);}该方法不兼容transform:translateY(-50%)属性，所以只能在IE9及以上使用。flex.parent{显示：flex;align-items:center;}flex灵活布局更加灵活简单，对页面其他元素的影响更小。它只兼容IE11及更高版本。如果是在移动端开发，尽量使用这个属性来实现各种复杂的布局。CommonlayoutTwo-columnlayoutTwo-columnlayout：一栏是固定宽度的，一栏是自适应的，自适应栏作为内容的主体。1：使用float+margin属性。.left{宽度：200px;float:left;}.right{margin-left:200px;}也可以使用绝对定位来实现。.container{position:relative;}.left{position:absoulte;左：0；宽度：200px;}.right{位置：绝对;左：200px；right:0;}三栏布局三栏布局也是常用的一种布局，其特点是两边固定两列，中间自适应。1：左右两列使用float属性，中间一列使用margin属性。
