如何在div内垂直和水平居中放置图像？

Question

我正在使用Materialize CSS，无法在div内垂直和水平居中放置图像，margin: 0 auto根本不起作用。

.blockA {
  border: 1px solid black;
}

.imgA {
  border: 1px solid red;
  margin: 0 auto;
  width: 100px;
}

.textA {
  border: 1px solid blue;
}

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
    <div class="container">
      <div class="row blockA">
        <img class="imgA" src="http://via.placeholder.com/350x150">
        <p class="textA center-align">
          TEXT
        </p>

      </div>
    </div>

请帮助！

Answer 1

一种选择是将.blockA用作父级，将.imgA用作子级，设置position: absolute并将其定位在left, top, transform的中心。检查CSS Centering Guide了解更多。

示例：

.blockA {
  border: 1px solid black;
  position: relative;
}

.imgA {
  border: 1px solid red;
  margin: 0 auto;
  width: 100px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.textA {
  border: 1px solid blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css" />
<div class="container">
  <div class="row blockA">
    <img class="imgA" src="http://via.placeholder.com/350x150">
    <p class="textA center-align">
      TEXT
    </p>
  </div>
</div>