居中div的方法总结

一、水平居中

1、margin+定宽：

width: 100px;margin: 0 auto;

2、table + margin：

display: table;margin: 0 auto;

(display: table 在表现上类似 block 元素，但是宽度为内容宽。)

3、inline-block + text-align:(用于多个块级元素)

.child {
display: inline-block;
}
.parent {
text-align: center;
}

兼容性佳（甚至可以兼容 IE 6 和 IE 7）

4、 absolute + margin-left：

.parent {
position: relative;
}
.child {
position: absolute;
left:50%;
width: 100px;
margin-left: -50px; /* width/2 */
}

宽度固定
相比于使用transform ，有兼容性更好

5、 absolute + transform:

.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题

6、 flex + justify-content

.parent {
display: flex;
justify-content: center;
}

只需设置父节点属性，无需设置子元素
flex有兼容性问题

二、垂直居中

垂直居中：vertical-align:middle;
父元素高度不确定的文本，图片，块级元素的竖直居中：给父元素设置相同的上下边距实现
父元素高度确定的单行文本垂直居中：line-height值与父元素的高度值相同

1、table-cell + vertical-align：

.parent {
display: table-cell;
vertical-align: middle;
}

兼容性好(IE 8以下版本需要调整页面结构至 table)

2、absolute + transform:

.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。但如果绝对定位元素是唯一的元素则父元素也会失去高度。
transform 为 CSS3 属性，有兼容性问题
同水平居中，这也可以用margin-top实现，原理水平居中

3、flex + align-items:
如果说absolute强大，那flex是最强的。但它有兼容问题

.parent {
display: flex;
align-items: center;
}

3、水平垂直居中

1、absolute + transform

.parent {
position: relative;
}
.child {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%)
}

绝对定位脱离文档流，不会对后续元素的布局造成影响。
transform 为 CSS3 属性，有兼容性问题

2、inline-block + text-align + table-cell + vertical-align

.parent {
text-align: center;
display: table-cell;
vertical-align: middle;
}
.child {
display: inline-block;
}
兼容性好

3、flex + justify-content + align-items

.parent {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /垂直居中/
}