垂直居中

图片.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

代码