图片.png
图片.png
1,父容器设置padding:20px 0;
需求：父容器高度自适应，设置内div垂直居中
实现：设置内div的padding上下等距
图片.png
图片.png
（2）父容器和子div
图片.png
代码
2,绝对定位
需求：父容器定高（或自适应），内div宽高自适应，实现内div垂直居中
1）设置负margin,兼容所有浏览器，但不响应（只改变dialog的宽高，达不到居中效果）
图片.png
图片.png
代码
总结：
优点：兼容IE
缺点：内div宽高改变，需要手动更改margin-left和margin-top的负值
2）使用css3的transform:translate(-50%,-50%),不兼容所有浏览器，但响应
图片.png
图片.png
图片.png
绝对定位，css3的transform:translate(-50%,-50%)
总结：
优点：改变内div的宽高，不用手动更改margin-top和margin-left的负值
缺点：不兼容IE
3，margin:auto 设置水平垂直都居中
4，添加一个辅助div,设置基准线对齐方式 vertical-align
vertical-align可对行内元素和表格元素设置垂直对齐方式
行内元素
图片.png
图片.png
图片.png
行内元素对齐
5，关于table
（1）纯table实现，html-table 利用table-tr-td中table自带的垂直居中
需求：table定高，不使用vertical-align,使里面的div（宽高自适应）垂直居中
图片.png
代码
总结：
优点：兼容所有IE浏览器
缺点：table布局已近过时
（2）div模拟table，表格元素（div-display:table/table-row/table-cell）
1）div>img 使img垂直居中
需求：包裹层定高，img实现垂直居中
实现思路：
1）包裹层设置display:table-cell
2）包裹层设置vertical-align:middle
图片.png
图片.png
2）div>div
需求：div里面包裹着一个div（contain）,包裹层定高，contain宽高自适应，使contain垂直居中与包裹层
实现主要点：
1）div父包裹层模拟 table-cell(列)
2）列定高
3）vertical-align:middle
图片.png
代码
5，试出来的方法：margin:auto;
需求：父容器定高，子容器定高定宽，实现自容器水平垂直居中
实现要点：
（1）父容器（position:relative）,子容器（position:absolute）
（2）父容器定高，子容器定高定宽
（3）子容器设置top,bottom,right,left都为0
（4）子容器设置 margin水平垂直都为auto
图片.png
代码
