Display table-cell vertical-align middle create 1px weird spacing in chrome

Question

我需要将我的内容放在 div 的中心，所以我使用 table-cell 和 vertical-align 来实现它。但是，它只在 Chrome 中创建了一个奇怪的间距，例如 1px。我真的找不到解决办法。请帮帮我。

body {
  background: red;
}
.img-wrapper, .txt-wrapper {
  height: 300px;
  width: 50%;
  float: left;
  position: relative;
}
.img-wrapper {
  background: yellow;
}
.txt-wrapper {
  background: green;
  display: table;
}
.txt {
  display: table-cell;
  vertical-align: middle;
}
.col1 {
  vertical-align: middle !important;
  background: yellow;
  width: 50%;
}
.col2 {
  background: green;
  width: 50%;
}
.pushtoright {
  left: 50%;
}
.pulltoleft {
  right: 50%;
}

<div class="therow">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper">
    <div class="txt">
      <h2>Title 1</h2>
      <p>Description 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>

<div class="therow">
  <div class="img-wrapper pushtoright">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper pulltoleft">
    <div class="txt">
      <h2>Title 2</h2>
      <p>Description 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>

<div class="therow">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper">
    <div class="txt">
      <h2>Title 3</h2>
      <p>Description 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>

<div class="therow">
  <div class="img-wrapper pushtoright">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper pulltoleft">
    <div class="txt">
      <h2>Title 4</h2>
      <p>Description 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>

演示：https://codepen.io/rae0724/pen/jwxJqX

Answer 1

如果没有 display: table in .txt-wrapper 如果这不是问题其他……奇怪的效果消失了

body {
  background: red;
}
.img-wrapper, .txt-wrapper {
  height: 300px;
  width: 50%;
  float: left;
  position: relative;
}
.img-wrapper {
  background: yellow;
}
.txt-wrapper {
  background: green;
  display: flex;
  align-items:center;

  /*display: table;*/
}
.txt {
  display: inline-block;
  padding: 20px;
}
.col1 {
  vertical-align: middle !important;
  background: yellow;
  width: 50%;
}
.col2 {
  background: green;
  width: 50%;
}
.pushtoright {
  left: 50%;
}
.pulltoleft {
  right: 50%;
}

<div class="therow">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper">
    <div class="txt">
      <h2>Title 1</h2>
      <p>Description 1 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>

<div class="therow">
  <div class="img-wrapper pushtoright">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper pulltoleft">
    <div class="txt">
      <h2>Title 2</h2>
      <p>Description 2 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>

<div class="therow">
  <div class="img-wrapper">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper">
    <div class="txt">
      <h2>Title 3</h2>
      <p>Description 3 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>

<div class="therow">
  <div class="img-wrapper pushtoright">
    <div class="img"></div>
  </div>
  <div class="txt-wrapper pulltoleft">
    <div class="txt">
      <h2>Title 4</h2>
      <p>Description 4 Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    </div>
  </div>
</div>