css - 将内容垂直和水平对齐到内容

Question

我需要将图像与 div(.md4 - boostrap)水平和垂直对齐...

我试着这样做:

             <div class="front" style="height: 820px; width: 820px; vertical-align: middle;" >

                    <div class="inner" style="float:none; margin:0 auto;">

                        <img src="http://www.codeproject.com/KB/GDI-plus/ImageProcessing2/img.jpg"/>

                    </div>

             </div>

但它不起作用。它仍然只以一种方式对齐。

jsfiddle https://jsfiddle.net/tzvze7ew/

我做错了什么？又该如何找工作？

Answer 1

您可以使用 CSS 属性 transform 使垂直和水平居中。

body {
  margin: 0;
}
div:first-of-type {
  background-color: blue;
  height: 100vh;
}
img {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="col-md-4">
  <div class="main">
    <div class="submain">
      <div class="front">
        <div class="inner">
          <img src="http://placehold.it/100x100" />
        </div>
      </div>
      <div class="back">
      </div>
    </div>
  </div>
</div>