🎶 Sym - 一款用 Java 实现的现代化社区(论坛/BBS/社交网络/博客)平台

📕 链滴笔记 - 一款桌面端笔记应用,支持 Windows、Mac 和 Linux

🎸 Solo - B3log 分布式社区的博客端节点,欢迎加入下一代社区网络

♏ Vditor - 一款浏览器端的 Markdown 编辑器

CSS 布局 - 使用 transform 进行居中

2019-07-16

描述

使用 position: absolute 和 transform: translate() 水平垂直居中一个父元素中的子元素(这是除 flexbox 和 display: table 以外的另一种居中方案)。他类似于 flexbox,这种方案不需要你知道父元素或子元素的高和宽,因此他非常适用于有自适应需求的应用。

HTML

<div class="parent"><div class="child">Centered content</div></div>

CSS

.parent {
  border: 1px solid #333;
  height: 250px;
  position: relative;
  width: 250px;
}
.child {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

Demo

说明

  1. 在子元素上的 position: absolute 可以允许该元素基于父容器块的边界进行位置的设定
  2. left: 50% 和 top: 50% 使该元素距父容器上和左的距离分别为父元素高和宽的 50%
  3. transform: translate(-50%, -50%) 允许子元素沿着父元素高和宽的反方向移动自身高、宽 50% 的距离,这样一来,子元素就可以水平垂直居中了
  4. 对于这个 Demo 来说,我们需要固定其父元素的高和宽

浏览器支持

支持率:97.7%
支持情况:https://caniuse.com/#feat=transforms2d
⚠️:进行所有支持时需要提供前缀

返回总目录

每天 30 秒系列之 CSS


欢迎注册黑客派社区,开启你的博客之旅。让学习和分享成为一种习惯!

留下你的脚步