元素居中

水平居中

text-align

在父元素上设置 text-align: center 使文字/图片水平居中。

.container {
  text-align: center;
}

margin

.container {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}

垂直居中

居中vs不居中

代码

绝对定位实现居中

代码

vertical-align实现居中

代码

table-cell实现居中

代码

display: flex

<div class="space">
  <div class="earth"></div>
</div>
.space {
  width: 100vw;
  height: 100vh;  /* 设置宽高以显示居中效果 */
  display: flex;  /* 弹性布局 */
  align-items: center;  /* 垂直居中 */
  justify-content: center;  /* 水平居中 */
}

body {
  margin: 0;
  background: rgba(0, 0, 0, .95);
}

.earth::after {
  content: '🌏';
  font-size: 85px;
}

🚀 https://codepen.io/twhy/pen/xrrbGg

results matching ""

    No results matching ""