Question

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

我尝试这样做：

data: JSON.stringify({
    "a": "b"
})

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

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>

Answer 2

上述解决方案不支持所有浏览器。因为transform是CSS3属性。

我们可以通过javascript实现。我们可以做的是让我们计算浏览器的高度，然后除以图像的2和50％高度。

以下是代码

.img {
  margin: 0 auto;
 }

的Javascript 让我们说你的图像高度是150像素。

<script>
  $(document).ready(function(){
   var height = window.innerHeight;
   var new_height = (height/2) - 75; // Half of 150 of 75.
   $('.img').css('margin-top', new_height+'px');
  });
</script>

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

2 个答案: