CSS SNIPPET

  返回

Ghost trick实现元素居中  页面布局

将一个元素在另一个元素内垂直居中。

HTML
<div class="ghost-trick">
  <div class="ghosting"><p>Vertically centered without changing the position property.</p></div>
</div>
CSS
.ghosting {
  height: 300px;
  background: #0ff;
}

.ghosting:before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

p {
  display: inline-block;
  vertical-align: middle;
}
效果演示

Vertically centered without changing the position property.

代码说明
  • 使用:before伪元素的样式垂直对齐指定的内联元素,而不需要修改其position属性。
浏览器支持

100.0%