Вертикальное положение DIV в центре родительского DIV?

Question

Я хотел бы разместить мой caption-wrap div вертикально по центру в metaslider div. Может кто-нибудь помочь?

http://jsfiddle.net/LuLkza9L/

<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> 

Answer 1

я решил:

.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; 
} 

Answer 2

Очень просто. Просто добавьте list-style:none;

вот JSFiddle со всеми вашими классами в такте.

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>