居中可能是我們在使用CSS時遇到的最常見的問題之一。下面介紹各種居中方法。

1. 水平居中

（a）使用text-align

.container {
text-align: center;
}

（b）使用margin

.container {
margin: 0 auto;
}

（c）使用flexbox

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

2. 垂直居中

（a）使用line-height

.container {
height: 100px;
line-height: 100px;
text-align: center;
}

（b）使用table-cell和vertical-align

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

（c）使用flexbox

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

3. 水平垂直居中

（a）使用absolute

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

（b）使用table和table-cell

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

（c）使用flexbox

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