html - 如何居中2个 float div的内容

Question

我想将 float div 的文本和图像相对于其父 div 居中。在尝试了各种边距选项、转换、 block 类型之后，我仍然没有结果。

.main-div {
  height: 15rem;
  background: #00c6ff;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #0072ff, #00c6ff);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #0072ff, #00c6ff);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.text-div a {
  font-size: 2rem;
  color: white;
}

.text-div {
  float: left;
  width: 70%;
}

.image-div {
  float: right;
  width: 30%;
}

.cleared {
  clear: both;
}

@media screen and (max-width: 400px) {
  .image-div {
    float: none;
    width: auto;
  }
}

<div class="main-div">
  <div class="text-div">
    <h3><a href="https://stackoverflow.com/">1. Trying to center the text and image</a></h3>
  </div>
  <div class="image-div">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQzE2VnttSwJdsIARy0aq-wdVfV-ajManGwb3qwpCprqRBtd_Mv" /> </div>
  <div class="cleared"></div>
</div>

我对 .text-div、 和 .image-div 所做的任何更改都会溢出或向下移动。它们也很少重叠。

Answer 1

div{
  width: 300px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

您可以使用此 CSS 将中心的 div 设置为一个位置