使用Absolute Center或Flexbox进行CSS垂直居中或翻译不起作用

Question

我知道这个问题一再被问到。 我试图用CSS垂直居中文本容器，但没有任何作用。是因为流动的负边际布局？我错了什么？

Text Container c-service__body处于最大化视图（代码片段）中，从未完全居中。

非常感谢。

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. 使用翻译方法:(桌面：标题跳到无穷大）

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可以是inbricated并且可以避免浮动

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或disply：表格可以使用

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

但您也可以使用内联块将每个boxe与其中心对齐：

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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>