CSS SNIPPET

  返回

用Flexbox布局居中元素  页面布局

使用flexbox在父元素内水平和垂直居中子元素。

HTML
<div class="flexbox-centering"><div class="child">Centered content.</div></div>
CSS
.flexbox-centering {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}
效果演示
Centered content.
代码说明
  1. display: flex 启用flexbox。
  2. justify-content: center 水平居中子元素。
  3. align-items: center 垂直居中子元素。
浏览器支持

100.0%

⚠️ 完整支持需要浏览器前缀。