CSS垂直及水平居中小技巧

水平居中

margin法

html代码

<div class="box">
    <div class="text">我要居中</div>
</div>

css代码

.box {
  //无关代码已省略
  .text {
    margin: 0 auto;
  }
}

flex法

html代码

<div class="box">
    <div class="text">我要居中</div>
</div>

css代码

.box {
  //无关代码已省略
  display: flex;
  justify-content: center;
}

效果

垂直居中

line-height法

html代码

<div class="box">
    <div class="text">我要居中</div>
</div>

css代码

.box {
  //无关代码已省略
  height: 500px;
  .text {
    line-height: 500px;//与height相同
  }
}

注意：需换行的文本不要使用此方法

flex法

html代码

<div class="box">
    <div class="text">我要居中</div>
</div>

css代码

.box {
  //无关代码已省略
  display: flex;
  align-items: center;
}

效果