對于行內(nèi)元素（inline）或者display屬性為inline-block、inline-flex等的元素，可以通過設(shè)置其父容器的text-align屬性為center來實現(xiàn)水平居中。示例如下所示：
<style>
  .container {


text-align: center; /* 文本居中 */


}
</style>

<div class=“container”>
  這里放入需要居中的內(nèi)容
</div>

對于塊級元素（block）或者display屬性為block、table等的元素，可以通過設(shè)置左右margin為auto來實現(xiàn)水平居中。示例如下所示：<style>
  .centered {


margin-left: auto;
margin-right: auto;


}
</style>

<div class=“centered”>
  這里放入需要居中的內(nèi)容
</div>

對于單行文字的情況，可以通過設(shè)置line-height與高度相同來實現(xiàn)垂直居中。示例如下所示：


<style>
  .vertical-center {

height: 30px; /* 定義高度 */
line-height: 30px; /* 與高度保持一致 */


}
</style>

<p class=“vertical-center”>
  這里放入需要垂直居中的文字
</p>

對于多行文字或者圖片等非單行元素，可以結(jié)合position和transform屬性來實現(xiàn)垂直居中。示例如下所示：
<style>
  .parent {


position: relative; /* 必須設(shè)置relative/absolute/fixed等定位值 */
height: 200px; /* 定義高度 */


}

.child {

position: absolute; /* 子元素絕對定位 */
top: 50%; /* 上邊界移動到父容器的50%處 */
transform: translateY(-50%); /* 向上移動自身高度的50% */


}
</style>

<div class=“parent”>
  <img src=“image.jpg” alt=“” class=“child”> <!– 這里放入需要垂直居中的元素 –>
</div>