CSS - 垂直居中对象和文本会产生意外的结果

Question

CSS中的垂直居中相对简单。 这是我正在使用的代码。

position:relative;
top:50%;
transform:translateY(-50%);

1）这非常适合将多个形状彼此相邻居中。

2）它非常适合将多个单词彼此相邻居中。

然而，奇怪的是，当我在居中

单词旁边放置一个居中形状时，它会变得混乱。 这是否有明显或不那么明显的原因？ 我该如何解决？

我创建了一个小提琴，以便您可以看到结果。 https://jsfiddle.net/9h1pfpns/

这是我的代码：

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
}
.shape {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  width: 250px;
  height: 100px;
  margin-left: 10px;
  background-color: aquamarine;
}
.text {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  font: bold 1.25em Arial, Helvetica, sans-serif;
  margin-left: 10px;
  border: 1px solid #754419;
}

<div class="container">
  <div class="shape"></div>
  <div class="text">first</div>
</div>

Answer 1

您可以将文本的CSS更改为：-

.text {
  display: inline-block;
  position: relative;
  margin: 0 auto;
  font: bold 1.25em Arial, Helvetica, sans-serif;
  margin-left: 10px;
  border: 1px solid #754419;
}

只是为了澄清，我删除了以下CSS：-

top: 50%;
transform: translateY(-50%);

并补充说：-

margin: 0 auto;

查看 jsFiddle https://jsfiddle.net/01kkavf4/

*更新*

您还可以替换：-

top: 50%;
transform: translateY(-50%);

跟：-

top: 10%;
transform: translateY(-50%);

两者的js小提琴：-

https://jsfiddle.net/01kkavf4/

第二种分辨率更适合您的盒子。

只是几种不同的方式。

Answer 2

它不起作用，因为在使用相对定位和变换进行偏移之前，元素未与顶部对齐。默认值为 vertical-align: baseline 。

只需添加vertical-align: top.

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
}
.item, .text {
  display: inline-block;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 10px;
  vertical-align: top;
}
.item {
  width: 250px;
  height: 100px;
  background-color: aquamarine;
}
.text {
  font: bold 1.25em Arial, Helvetica, sans-serif;
  border: 1px solid #754419;
}

<div class="container">
  <div class="item"></div>
  <div class="text">first</div>
</div>

无论如何，我建议不要使用这种方法，因为如果容器比内容物短，它们会在上方和下方溢出。但是您将无法滚动以查看上述溢出。

相反，我推荐带有自动边距的弹性框。

.container {
  height: 200px;
  margin: 10px;
  border: 4px solid #754419;
  display: flex;
}
.item, .text {
  margin: auto 0 auto 10px;
}
.item {
  width: 250px;
  height: 100px;
  background-color: aquamarine;
}
.text {
  font: bold 1.25em Arial, Helvetica, sans-serif;
  border: 1px solid #754419;
}

<div class="container">
  <div class="item"></div>
  <div class="text">first</div>
</div>