Two column text with image in middle middle

Question

I have looked around a lot but cannot find a tutorial or suggestion for how to place an image in both the vertical and horizontal center of a page of two-column text. I've seen explanations for straddling an image across two columns, but aligned at the top of the text. I want to align an image in the middle middle.!

Is this even possible? I would prefer to do it in CSS, but will consider anything that works, (especially if it comes with some instruction.) Thanks for any help you can offer (even if it's to tell me to give up.) (c;

Answer 1

I've found the technique described here and shown below to be very effective:

HTML

<div class="container">
  <div class="inner">
    <img src="//placehold.it/200x200">
  </div>
</div>

CSS

.container {
  text-align: center;
}

.container:before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
 }

.inner {
  display: inline-block;
  vertical-align: middle;
 }

Answer 2

I don't know if this is what you looking for.

1) Create two div (as column) and put image at the middle(Image will overlapped the both column.)

DEMO

 img
 {
 background: red;
 height: 300px;
 width:400px;
 margin: auto;
 position: absolute;
 top: 0;
 right: 0;
 left: 0;
 bottom: 0;
 }

2) Create 2 div(as column) with opacity:0.5 and put image at the middle (The image will acts like background since z-index is added)

DEMO

img
{
z-index:-1;
}

Good Luck!!