【CSS】水平垂直居中

[swiftwind0405]

子元素不确定大小的情况

方法一：flex

.parent {
	display: flex;
    justify-content: center; // 主轴居中
    align-items: center;     // 交叉轴居中
}

缺点：flex 布局只支持现代浏览器。

方法二：absoulte + transform

.parent {
    position: relative;
}

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

缺点：CSS3 属性只支持现代浏览器。

方法三：table-cell

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

.child {
    display: inline-block; // 必须是行内元素
}

缺点：子元素必须是行内元素。不然只会垂直居中。table-cell 布局会引起一些不必要的麻烦。

[swiftwind0405]

Blog/CSS居中的几种方式.MarkDown at master · answershuto/Blog