CSS—垂直居中常用方法总结1.text-align和line-hight方法实现居中这是一种比较常用的方法。通过line-hight设置行间距是实现垂直居中的关键。换行{宽度：500px；高度：200px；行高：200px；背景：#80ff80；文本对齐：居中；fontsize:20px}和background-clip来实现水平和垂直居中。设置background-clip为center-box，将背景裁剪到内容区域的外边缘，然后使用padding设置外层div减去内层div的一半差值。父母{保证金：0自动；宽度：250px；高度：250px；背景：#80ff80；}.childimg{宽度：150px；高度：150px；填充50px；background-clip:center-box;}3.使用transform实现垂直居中百分比计算不是基于父元素，而是基于自身。适用于没有固定大小的内容，min-width,max-width,overflow:scroll等。使用该属性时，不需要定义子容器的高度，它会根据高度自适应内容。但IE8以下浏览器不支持，属性需要写浏览器厂商名称，可能会干扰其他变换效果。.parent{宽度：300px;高度：300px；保证金：0自动；背景：#89ff89；位置：相对；}.child{位置：绝对；左：50%；顶部：50%；-50%,-50%);-ms-transform:翻译(-50%,-50%);转换：翻译（-50%，-50%）；text-align:center}4.绝对居中实现垂直居中这是一种比较兼容的方法，可以实现垂直居中。可以设置content元素：position:fixed,z-index:999让视口居中，改变百分比宽高，最大最小宽度让它响应，只要margin:auto，contentblock就会垂直居中，使用top,left,Button和right可以设置当居中内容高于父容器时偏移，加上overflow:auto可以防止内容溢出，但是唯一可以确定的是父容器的高度必须知道。.parent{宽度：400px;最小高度：400px；保证金：0自动；背景：#89ff89；位置：相对；}.child{宽度：100%；高度：80%；溢出：自动；：绝对；左：0；顶部：0；底部：0；右：0；text-align:center}5.负边距实现垂直居中这是一种流行的方法。当块元素大小已知时，外边距从边距取负数，大小为(width/heigth+pdding)/2，加上top和left各50%，此方法兼容IE浏览器IE6以上，代码量比较少。但是，它不能自适应，并且不支持百分比大小和最小/最大属性设置。内容可能会溢出容器，需要计算margin的值。孩子{宽度：200px;高度：300px；填充：20px；位置：绝对；左：50%；顶部：50%；左边距：-120px；边距顶部：-170px；text-align:center}6.表格单元（table-cell）实现垂直居中，其内容块的高度可以跟随实际内容当内容溢出时，父元素会自行展开，浏览器兼容性也比较好，但是需要三层元素来居中最里面的元素。wrap.is-table{显示：表格；}.is-table.table-cell{显示：表格单元格；垂直对齐：中间；最大宽度：500px；最小高度：400px；背景：#0ff80}.table-cell.box{宽度：80%;保证金：0自动；text-align:center;000008}7.使用flexbox实现垂直居中使用flexbox实现垂直居中非常方便，代码简洁。align-items是让元素水平居中，justify-content是让元素垂直居中但是兼容兼容性不是很好，只能兼容10以上的IE，但是随着一些低版本的IE逐渐退出市场，flexbox的布局也将成为一种趋势。父母{显示：弹性;对齐项目：居中；证明内容：居中；宽度：400px；背景：#89ff89；}.child{文本对齐：居中；填充：10px;}
