CSS可以使用多種方法來(lái)將元素水平或垂直居中。
水平居中的常見(jiàn)方法有兩種：
1.對(duì)于行內(nèi)元素（inline）或者display屬性為inline-block、inline-flex等的元素，可以通過(guò)設(shè)置其父容器的text-align屬性為center來(lái)實(shí)現(xiàn)水平居中。
2.對(duì)于塊級(jí)元素（block）或者display屬性為block、table等的元素，可以通過(guò)設(shè)置左右margin為auto來(lái)實(shí)現(xiàn)水平居中。
垂直居中的常見(jiàn)方法也有多種：
1.對(duì)于單行文字的情況，可以通過(guò)設(shè)置line-height與高度相同來(lái)實(shí)現(xiàn)垂直居中。
2.對(duì)于多行文字或者圖片等非單行元素，可以結(jié)合position和transform屬性來(lái)實(shí)現(xiàn)垂直居中。
對(duì)于行內(nèi)元素（inline）或者display屬性為inline-block、inline-flex等的元素，可以通過(guò)設(shè)置其父容器的text-align屬性為center來(lái)實(shí)現(xiàn)水平居中。示例如下所示：
<style>
.container {
text-align: center; /* 文本居中 */
}
</style>
<div class=“container”>
這里放入需要居中的內(nèi)容
</div>
對(duì)于塊級(jí)元素（block）或者display屬性為block、table等的元素，可以通過(guò)設(shè)置左右margin為auto來(lái)實(shí)現(xiàn)水平居中。示例如下所示：<style> .centered {margin-left: auto; margin-right: auto;} </style>
<div class=“centered”> 這里放入需要居中的內(nèi)容 </div>
對(duì)于單行文字的情況，可以通過(guò)設(shè)置line-height與高度相同來(lái)實(shí)現(xiàn)垂直居中。示例如下所示：
<style>
.vertical-center {
height: 30px; /* 定義高度 */
line-height: 30px; /* 與高度保持一致 */
}
</style>
<p class=“vertical-center”>
這里放入需要垂直居中的文字
</p>
對(duì)于多行文字或者圖片等非單行元素，可以結(jié)合position和transform屬性來(lái)實(shí)現(xiàn)垂直居中。示例如下所示：
<style>
.parent {
position: relative; /* 必須設(shè)置relative/absolute/fixed等定位值 */
height: 200px; /* 定義高度 */
}
.child {
position: absolute; /* 子元素絕對(duì)定位 */
top: 50%; /* 上邊界移動(dòng)到父容器的50%處 */
transform: translateY(-50%); /* 向上移動(dòng)自身高度的50% */
}
</style>
<div class=“parent”>
<img src=“image.jpg” alt=“” class=“child”> <!– 這里放入需要垂直居中的元素 –>
</div>