css實現水平垂直居中的幾種方式

沐曉發表於2020-05-04
CSS

梳理下平時常用css水平垂直居中方式～

使用flex佈局

HTML

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

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  display: flex;
  align-items: center;
  justify-content: center;
}

.child {
  width: 200px;
  height: 200px;
  background-color: deepskyblue;
}

利用flex的alignItems:center垂直居中，justifycontent:center水平居中

利用相對定位和絕對定位的margin:auto

HTML

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

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  background-color: deepskyblue;

  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

相對定位下，使用絕對定位將上下左右都設定為0，再設定margin:auto即可實現居中

利用相對定位和絕對定位，再加上外邊距和平移的配合

HTML

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

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  position: relative;
}

.child {
  width: 200px;
  height: 200px;
  background-color: deepskyblue;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

相對定位下，使用絕對定位，利用margin偏移外容器的50%，再利用translate平移回補自身寬高的50%即可

利用textAlign和verticalAlign

HTML

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

CSS

.box {
  width: 100vw;
  height: 500px;
  background: skyblue;

  text-align: center;
}

.box:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}

.child {
  display: inline-block;
  vertical-align: middle;
}

利用textAlign:center實現行內元素的水平居中，再利用verticalAlign:middle實現行內元素的垂直居中，前提是要先加上偽元素並給設定高度為100%，用過elementUI的可以去看看其訊息彈窗居中實現方式就是如此

其他

上面都是在未知外容器和自身寬高下實現水平垂直居中的，如果已知其寬高，可以有更多種簡單的方式實現居中，其原理無非是利用絕對定位的top/left偏移、margin偏移、padding填充，在此就不分析了。還有就是單純文字的居中利用lineHeight和textAlign即可實現。

歡迎到前端學習打卡群一起學習～516913974

相關文章