使用 Absolute Center 或 Flexbox 或 Translate 的 CSS 垂直居中不起作用

Question

我知道这个问题已经被问了一遍又一遍。 我正在尝试使用 CSS 将文本容器垂直居中，但没有任何效果。是因为流动的负边距布局吗？我哪里错了？

文本容器 c-service__body 处于最大化视图（代码 sn-p）从未完全居中。

非常感谢。

1. 使用 Absolute 和 bot, left, top, right:0 方法：（桌面：底部空间）

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
}

.c-block__item:nth-of-type(1) {
  width: 50%;
  float: left;
}
.c-block__item:nth-of-type(2) {
  width: 45.83333%;
  float: left;
  margin-left: 4.16667%;
}

.c-block__item {
  position: relative;
}

.c-block__body {
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

<div class="c-block">
  <div class="c-block__item">
    <img src="http://lorempixel.com/g/700/414/">
  </div>
  <div class="c-block__item">
    <div class="c-block__body">
      <h2>asdasdasd</h2>
      <p>lorem bababakbakabkabakbaka asdasdadasd sadasdasdasd asdasdasd asd asdasdasdasd asd asdasdasdasdasd
      </p>
      <p>asdasdasdasd aösdköalskdölaksdölkasödlk asdasdasdölmölm
        asdasdasdasdasdasdölkölkölk
      </p>
    </div>
  </div>
</div>

1. 使用 translate 方法：（桌面：标题跳到无穷大）

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
}

.c-block__item:nth-of-type(1) {
  width: 50%;
  float: left;
}
.c-block__item:nth-of-type(2) {
  width: 45.83333%;
  float: left;
  margin-left: 4.16667%;
}

.c-block__item {
  position: relative;
}

.c-block__body {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="c-block">
  <div class="c-block__item">
    <img src="http://lorempixel.com/g/700/414/">
  </div>
  <div class="c-block__item">
    <div class="c-block__body">
      <h2>asdasdasd</h2>
      <p>lorem bababakbakabkabakbaka asdasdadasd sadasdasdasd asdasdasd asd asdasdasdasd asd asdasdasdasdasd
      </p>
      <p>asdasdasdasd aösdköalskdölaksdölkasödlk asdasdasdölmölm
        asdasdasdasdasdasdölkölkölk
      </p>
    </div>
  </div>
</div>

1. 使用 Flexbox（桌面全屏：底部有更多空间）

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
}

.c-block__item:nth-of-type(1) {
  width: 50%;
  float: left;
}
.c-block__item:nth-of-type(2) {
  width: 45.83333%;
  float: left;
  margin-left: 4.16667%;
}

.c-block__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="c-block">
  <div class="c-block__item">
    <img src="http://lorempixel.com/g/700/414/">
  </div>
  <div class="c-block__item">
    <div class="c-block__body">
      <h2>asdasdasd</h2>
      <p>lorem bababakbakabkabakbaka asdasdadasd sadasdasdasd asdasdasd asd asdasdasdasd asd asdasdasdasdasd
      </p>
      <p>asdasdasdasd aösdköalskdölaksdölkasödlk asdasdasdölmölm
        asdasdasdasdasdasdölkölkölk
      </p>
    </div>
  </div>
</div>

Answer 1

您首先需要两个框的高度相同，然后垂直对齐里面的内容（除了另一个），这很容易

flex 可以嵌入和避免浮动

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
}
.c-block {
  display:flex;
  }
.c-block__item:nth-of-type(1) {
  width: 50%;
}
.c-block__item:nth-of-type(2) {
  width: 45.83333%;
  margin-left: 4.16667%;
}

.c-block__item {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="c-block">
  <div class="c-block__item">
    <img src="http://lorempixel.com/g/700/414/">
  </div>
  <div class="c-block__item">
    <div class="c-block__body">
      <h2>asdasdasd</h2>
      <p>lorem bababakbakabkabakbaka asdasdadasd sadasdasdasd asdasdasd asd asdasdasdasd asd asdasdasdasdasd
      </p>
      <p>asdasdasdasd aösdköalskdölaksdölkasödlk asdasdasdölmölm
        asdasdasdasdasdasdölkölkölk
      </p>
    </div>
  </div>
</div>

也可以使用disply:table

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
}
.c-block {
  display:table;
  }
.c-block__item:nth-of-type(1) {
  width: 50%;
  display:table-cell;
}
.c-block__item:nth-of-type(2) {
  display:table-cell;
  padding-left: 4.16667%;
  text-align:center;
  vertical-align:middle;
}

<div class="c-block">
  <div class="c-block__item">
    <img src="http://lorempixel.com/g/700/414/">
  </div>
  <div class="c-block__item">
    <div class="c-block__body">
      <h2>asdasdasd</h2>
      <p>lorem bababakbakabkabakbaka asdasdadasd sadasdasdasd asdasdasd asd asdasdasdasd asd asdasdasdasdasd
      </p>
      <p>asdasdasdasd aösdköalskdölaksdölkasödlk asdasdasdölmölm
        asdasdasdasdasdasdölkölkölk
      </p>
    </div>
  </div>
</div>

但您也可以使用内联块将每个框对齐到它们的中心：

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
}

.c-block__item:nth-of-type(1) {
  width: 50%;
}
.c-block__item:nth-of-type(2) {
  width: 45%;
  margin-left: 4%;
}

.c-block__item {display:inline-block;
  vertical-align:middle;
}

<div class="c-block">
  <div class="c-block__item">
    <img src="http://lorempixel.com/g/700/414/">
  </div>
  <div class="c-block__item">
    <div class="c-block__body">
      <h2>asdasdasd</h2>
      <p>lorem bababakbakabkabakbaka asdasdadasd sadasdasdasd asdasdasd asd asdasdasdasd asd asdasdasdasdasd
      </p>
      <p>asdasdasdasd aösdköalskdölaksdölkasödlk asdasdasdölmölm
        asdasdasdasdasdasdölkölkölk
      </p>
    </div>
  </div>
</div>

Answer 2

我认为浮动元素会给您带来问题。

这对你有用吗？

Codepen

img {
  max-width: 100%;
  font-style: italic;
  vertical-align: middle;
}

.c-block__item:nth-of-type(1) {
  width: 50%;
  display: inline-block;
}
.c-block__item:nth-of-type(2) {
  width: 45.83333%;
  display: inline-block;
  vertical-align: middle;
}

<div class="c-block">
  <div class="c-block__item">
    <img src="http://lorempixel.com/g/700/414/">
  </div>
  <div class="c-block__item">
    <div class="c-block__body">
      <h2>asdasdasd</h2>
      <p>lorem bababakbakabkabakbaka asdasdadasd sadasdasdasd asdasdasd asd asdasdasdasd asd asdasdasdasdasd
      </p>
      <p>asdasdasdasd aösdköalskdölaksdölkasödlk asdasdasdölmölm
        asdasdasdasdasdasdölkölkölk
      </p>
    </div>
  </div>
</div>