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%即可


利用textAlignverticalAlign

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填充,在此就不分析了。還有就是單純文字的居中利用lineHeighttextAlign即可實現。


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

posted @ 2020-05-04 12:32  沐曉  閱讀(...)  評論(...編輯  收藏
全民捕鱼游戏怎么玩 北京时时彩下载手机版 辽宁十一选五投注 海南环岛赛玩法规则 福建十一选五开奖走势图一 陕西高频十一选五走势图 7club娱乐城百家乐 谷歌股票行情实时查询 网上分分彩是不是真的 个人投资理财平台 双色球预测王软件下载