前言

在CSS佈局中，水平居中與垂直居中一直是用到比較多的，在本篇中將介紹水平居中、垂直居中的幾種方式。

示例

HTML：

<div class="parent">
    <div class="child"></div>
</div>

CSS：

.parent {
    width: 200px;
    height: 100px;
    position: relative;
    background-color: #374858;
}

.parent .child {
    width: 100px;
    height: 50px;
    background-color: #9dc3e6;
}

效果：

1. 水平居中

這裡將分別介紹當子元素的樣式為內聯、塊級以及絕對定位時的水平居中佈局方案。

1.1 子元素為內聯樣式

說明：當子元素為內聯樣式時(display: inline-block | inline-flex | inline-grid | inline-table 也含有內聯樣式特性)，只需要設定父元素的text-align: center。

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

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

1.2 子元素為塊級樣式

說明：父元素和子元素都是塊級元素時，設定子元素的margin: 0 auto即可。

注意：此時的子元素需要設定width。

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

.parent {}

.parent .child {
    display: block;
    margin: 0 auto;
}

1.3 子元素 position: absolute

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

.parent {}

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

1.4 父元素 display: flex

說明：此時子元素可為內聯、塊級元素。

瀏覽器支援：IE 11。

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

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

.child {
    display: inline;
    margin: 0 auto;
}

2. 垂直居中

同水平居中一樣，這裡也將分別介紹當子元素的樣式為內聯、塊級以及絕對定位時的垂直居中佈局方案。

2.1 子元素為塊級元素

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

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

.parent .child {
    display: block;
}

2.2 子元素 position: absolute

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

.parent {}

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

2.3 父元素 display: flex

說明：此時子元素可為內聯、塊級元素

瀏覽器支援：IE 11。

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

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

.parent .child {
    display: inline;
}

3. 水平居中+垂直居中

3.1 子元素 display: inline-block

說明：設定子元素的display: inline-block。

注意：此時的子元素需要設定width和height。

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

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

.parent .child {
    display: inline-block;
}

3.2 子元素 position: absolute

說明：此時的子元素為絕對定位。

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

.parent {
    position: relative;
}

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

3.3 父元素 display: flex

瀏覽器支援：IE 11。

CSS：

.parent {width: 200px;height: 100px;position: relative;background-color: #374858;}
.parent .child {width: 100px;height: 50px;background-color: #9dc3e6;}

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

.parent .child {}