Vertically position DIV in the center of parent DIV?

Question

I'd like to position my caption-wrap div vertically centeredwithin the metaslider div. Can someone help?

<div style="width: 100%; margin: 0 auto;" class="metaslider metaslider-flex metaslider-364 ml-slider">

    <div id="metaslider_container_364">
        <div id="metaslider_364" class="flexslider">
            <ul class="slides">
                <li style="display: block; width: 100%;" class="slide-370 ms-image">
                    <img src="http://placehold.it/700x300" height="300" width="700" alt="" class="slider-364 slide-370" />
                    <div class="caption-wrap">
                        <div class="caption">
                            <h2 style="text-align:center">Can I place this in centre?</h2>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>

</div>

possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — JRulle, Feb 12 '15 at 21:22
Oh horrors, those inline style's and image size attributes... — Jacob G, Feb 12 '15 at 21:25
Resolved: http://jsfiddle.net/LuLkza9L/6/ Will post a thorough reply soon :-) — michaelmcgurk, Feb 12 '15 at 21:56

score 0 · Answer 1 · answered Feb 12 '15 at 21:33

0

Really simple. Just add list-style:none;

here is the JSFiddle with all your classes in tact.

JSFiddle

* {
    border:black 1px solid;
    text-align:center;
    padding: 0;
    margin: 0;
    list-style: none;
}

<ul>
    <li>
        <img src="http://placehold.it/300x100" />
         <h2>Can I place this in centre?</h2>
    </li>
</ul>

answered Feb 12 '15 at 21:33

Roger

3,226
1
22
38

1

How does this answer the question? – Jacob G Feb 12 '15 at 21:36
Unfortunately, I was hoping to float the text over the image too. – michaelmcgurk Feb 12 '15 at 21:36

score 0 · Accepted Answer · answered Feb 16 '15 at 08:08

I have resolved: http://jsfiddle.net/LuLkza9L/6/

.caption-wrap {
   position: absolute; 
   top: 45%; 
   left: 0;
   text-align: center; 
   width: 100%; 
}

.caption-wrap span { 
    color: red;
    font-weight: 300;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: 15px;
    pointer-events: none;

}

.metaslider {
  position:relative;
}

Vertically position DIV in the center of parent DIV?

2 Answers2