垂直水平居中div

垂直水平居中div

1.使用 table-cell方法：

父盒子设置：display：table-cell； vertical-align：middle；

Div 设置： margin：0 auto

table-cell

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。

小结：

1. 不要与float：left; position:absolute; 一起使用
2. 可以实现大小不固定元素的垂直居中
3. margin设置无效，响应padding设置
4. 对高度和宽度高度敏感
5. 不要对display：table-cell使用百分比设置宽度和高度

2.使用 CSS3transform：

父盒子设置：display：relative

Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；

3.父盒子设置 display: flex;
justify-content: center;
align-items: center;
4. 父设置相对定位
子Div 设置： margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;

div垂直水平居中浏览器

1.Div 设置： transform： translate(-50%，-50%)；position： absolute；top： 50%；left： 50%；
2…Div 设置： margin: auto;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;