html - Image with position:absolute not centering inside parent div with position:relative -

html - Image with position:absolute not centering inside parent div with position:relative -

first, not sure if relevant or not, i'm using bootstrap 3.

so section of page (there's more below it) have viewport height set 100, , within 2 rows each take 50% of viewport. in first row image i'm trying center both horizontally , vertically. in sec row image i'm trying center horizontally , fixed bottom. html looks this:

class="snippet-code-html lang-html prettyprint-override"><div class='row vh-100'> <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 height-100'> <!-- tats --> <div class='row height-50'> <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 relative height-100'> <img src='images/logo.png' class='img-responsive block absolute center middle max-height-100'> </div> </div> <!-- silhouette --> <div class='row height-50'> <div class='col-xs-12 col-sm-12 col-md-12 col-lg-12 relative height-100'> <img src='images/silhouette.png' class='img-responsive block absolute center bottom max-height-100'> </div> </div> </div> </div>

and css looks this:

class="snippet-code-css lang-css prettyprint-override">.block{ display: block; } .absolute{ position: absolute; } .relative{ position: relative; } .vh-100{ height: 100vh; } .vh-50{ height: 50vh; } .height-100{ height: 100%; } .height-50{ height: 50%; } .center{ margin-left: auto; margin-right: auto; } .top{ top: 0%; } .middle{ top: 50%; } .bottom{ bottom: 0%; } .max-height-100{ max-height: 100%; }

so i'm running this: neither image centers horizontally unless alter position relative. also, first image centers vertically within whole page, not div contained in. ideas?

absolute position elements centered this:

#element { left:50%; top:50%; transform:translate(-50%,-50%); }

(don't forget add together vendors transform: -webkit-transform, etc)

also if know width of absolute element, can use:

margin-left:-halfelemwidth; margin-top:-halfelemheight;

this help back upwards older browsers not back upwards css transforms

edit: tired when typed, brought attending user below margin-top , margin-left should half instead of full.

edit2: can seek approach.

for parent element height use:

display:table-cell; vertical-align:middle; text-align:center;

this can center images without leaving container, , without relative , absolute elements.

html css twitter-bootstrap