CSS

Question

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

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

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

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

然而奇怪的是，当我将一个居中的形状放在一个居中的单词旁边时，它就会变得混乱。这有明显的或不那么明显的原因吗？我该如何解决？

我创建了一个 fiddle 所以你可以看到结果。 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%);

两者的jsFiddle：-

https://jsfiddle.net/01kkavf4/

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

只是几种不同的方式。

Answer 2

它不起作用，因为在使用相对定位和变换进行偏移之前，the elements are not aligned to the top。默认为 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>

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

CSS - Vertical centering object and text creates unexpected result

html

centering