html - 以响应方式在图像上垂直和水平对齐内容 DIV 的最佳方法是什么

Question

在响应式图像上垂直和水平对齐内容 DIV 的最佳方法是什么。我可以给出绝对位置并对齐 top:some% 和 left:some% 但它不会在某些屏幕上对齐图像容器的中间，我可以给 margin-top:-%,margin-left:some% 这个也不会'有时在不同的屏幕上不能正确对齐。有没有其他方法可以做到这一点。内容 div 应该准确地放置在图像的中间(在所有屏幕上水平和垂直)。最好的方法是什么？

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
   <img src="img/someimage.png" class="img-responsive">
   <div class="content_div">
       image content paragraph 1
       image content paragraph 1
       image content paragraph 1
   </div>
</div>

Answer 1

content div必须放在图片的中间。

  <div class="container">
    <img goes here>
    <div text goes here>
  </div>

CSS

 .contianer
 {
   position: relative;
 }

 .container img, .container .txt
 {
    position: absolute;
 }

 .container img
 {
   //Width and height
  }

 .container .txt
 {
    width: 100%;
    margin: auto;
    line-height: height of image div; // It ll pace in the middle of image
 }

Demo它会帮助你。

另一种方式是

  set table layout for div and table-cell for content which will support vertical-align:middle`

编辑:

Demo2 -- 它会帮助你。

感谢SO