Vertikal ausrichten in einem div ohne Raum um den h1

Question

ich meinen Inhalt div vertikal zentriert in meinem Header div bekommen, und ich nicht auch Raum um den Inhalt div müssen, weil ich es hatte funktioniert, aber es würde Breite aufnehmen 100% jedes Mal. Hier ist mein Code

#header { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 15%; 
 
    background-color: white; 
 
    z-index: 10; 
 
    overflow: hidden; 
 
    display: table; 
 
} 
 
#content { 
 
    display: table-cell; 
 
    overflow: auto; 
 
    vertical-align: middle; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
} 
 
h1 { 
 
    display: inline-block; 
 
    margin: 0px; 
 
}

<div id="header"> 
 
    <div id="content"> 
 
    <h1>Jari Rengeling</h1> 
 
    </div> 
 
</div>

Answer 1

Verwendung display:flex mit align-items:center auf #header.

ist es das, was Sie suchen?

#header 
 
{ 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 30%; 
 
    background-color: green; 
 
    z-index: 10; 
 
    overflow: hidden; 
 
    display: flex; 
 
    align-items:center; 
 
} 
 

 
#content 
 
{ 
 
    
 
    overflow: auto; 
 
    vertical-align: middle; 
 
    padding: 0px; 
 
    margin: 0px; 
 
    float: left; 
 
} 
 

 
h1 
 
{ 
 
    display: inline-block; 
 
    margin: 0px; 
 
}

<div id="header"> 
 
     <div id="content"> 
 
     <h1>Jari Rengeling</h1> 
 
     </div> 
 
</div><!-- #header -->

Answer 2

Nicht wirklich sicher, ob dies ist, was Sie zu erreichen versuchen:

https://jsfiddle.net/pf8oujj6/

Verwenden

display: inline-block; 

Answer 3

Remove Schwimmer in den Inhalt verlassen.

https://jsfiddle.net/4tc95oy0/

#content 
{ 
    display: table-cell; 
    overflow: auto; 
    vertical-align: middle; 
    padding: 0px; 
    margin: 0px; 
} 

Float youre Element im Anzeigeblock-Transformation die vorhergehende Erklärung der Anzeigetabelle-Zelle außer Kraft setzen.