transform: translate(-50%, -50%)与position: relative配合失效，如何居中div内的span？

嘿，我来帮你搞定这个居中问题！你遇到的问题根源在于：span是行内元素（inline element），position: relative + top/left + transform这套居中方案，默认只对块级元素（block）或行内块元素（inline-block）生效，行内元素的定位和变换规则和它们不一样，所以才没达到预期效果。

下面给你几种靠谱的解决办法：

方法1：把Span转为行内块元素 #

只需要给.child加上display: inline-block;，你的原有定位代码就能正常工作了：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 200px;
  position: relative;
}
.child {
  border: 1px solid green;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-block; /* 新增这一行 */
}
</style>
</head>
<body>
<div class="parent">
  <span class="child">This is a span.</span>
</div>
</body>
</html>

方法2：用Flex布局（推荐！） #

Flex布局是现代CSS中处理居中最简洁的方式，不管子元素是行内还是块级都能轻松搞定，不需要复杂的定位：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 200px;
  display: flex; /* 开启flex布局 */
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}
.child {
  border: 1px solid green;
}
</style>
</head>
<body>
<div class="parent">
  <span class="child">This is a span.</span>
</div>
</body>
</html>

方法3：利用行内元素的文本特性居中 #

如果你的span只是单行文本，还可以用文本对齐+行高的方式，代码更简单：

<!DOCTYPE html>
<html>
<head>
<style>
.parent {
  border: 1px solid red;
  height: 100px;
  width: 200px;
  text-align: center; /* 水平居中行内元素 */
  line-height: 100px; /* 行高等于容器高度，实现垂直居中 */
}
.child {
  border: 1px solid green;
}
</style>
</head>
<body>
<div class="parent">
  <span class="child">This is a span.</span>
</div>
</body>
</html>

这几种方法里，Flex布局是最通用的，不管子元素内容多少、是什么类型，都能稳定实现居中，推荐优先使用~

内容的提问来源于stack exchange，提问作者injoy