html - Positioning content of <div> in a fixed header -

html:

.header {      border-style: solid;      border-width: 1px;      height: 10%;      width: 80%;      position: fixed;      display: flex;      justify-content: space-between;      }            .image {      border-style: solid;      border-width: 1px;      text-align: center;      vertical-align: middle;      }            .navigation {      border-style: solid;      border-width: 1px;      }            .content{      padding-top: 8%;      }            ul li {      display: inline-block;      }

<div class="header">      <div class="image">      image of page goes here    </div>      <div class="navigation">      <ul>        <li>contact us</li>        <li>about</li>        <li>home</li>      </ul>    </div>    </div>  <div class="content">      <p>am no listening depending believing. enough around remove barton agreed regret in or it. advantage mr estimable commanded provision. year shot deny shew come had. shall downs stand marry taken out. related mr account brandon up. wrong never ready ham these witty him. our compass see age uncivil matters weather forbade minutes. ready how truth son new under. breakfast procuring nay end happiness allowance assurance frankness. met simplicity nor difficulty unreserved who. entreaties mr conviction dissimilar me astonished estimating cultivated. on no applauded exquisite additions. pronounce add boy estimable nay suspected. sudden nay elinor thirty esteem temper. quiet leave shy gay off asked large style. betrayed cheerful declared end and. questions additions extremely incommode. next half add call them eat face. age lived smile 6 defer bed few. had admitting concluded behaviour him she. of death or being other. received shutters expenses ye pleasant. drift blind above @ up. no simple county stairs should praise as. drawings sir gay landlord had law smallest. formerly welcomed attended declared met unlocked. jennings outlived no dwelling denoting in peculiar believed. behaviour excellent middleton curiosity departure ourselves. on sake home leaf. of suspicion departure @ extremely believing. know said mind rent oh hope of. general enquire picture letters garrets on offices of no on. 1 hearing between excited evening inhabit thought you. style begin mr heard in music tried do. unreserved projection no introduced invitation. justice improve age article between. no projection preference reasonably delightful celebrated. preserved , abilities assurance tolerably breakfast use saw. , painted letters forming far village elderly compact. rest west each spot , knew. estate gay wooded depart 6 far her. of have lose gate bred. separate removing or expenses in. had covered evident chapter matters anxious. received overcame oh sensible @ an. formed change merely county it. separate contempt domestic to oh. on relation addition branched. put hearing cottage norland letters equally prepare too. replied exposed savings no viewing up. body add him hill. no father living people estate if. mistake produce beloved demesne if pursuit. cause dried no solid no small still widen. ten weather evident smiling bed against examine its. rendered far opinions 2 yet moderate sex striking. sufficient motionless compliment stimulated assistance at. convinced resolving extensive agreeable in on remainder. cordially affection met propriety him. man towards private weather pleased. in more part lose need want rank no. @ bringing or sensible pleasure. prevent parlors waiting females message society. situation admitting promotion @ or perceived be. mr acuteness estimable enjoyment up. held late felt know. learn allow solid grave. middleton suspicion age attention. chiefly several bed wishing. moments on chamber pressed to. doubtful yet way answered humanity desirous. minuter believe service arrived civilly add all. acuteness allowance @ eagerness favourite in extensive exquisite ye. remain valley mrs uneasy remove wooded him you. questions favourite him concealed. wife face took he. taste begin old why since dried can first. prepared or humoured formerly. evil mrs true post. express village evening prudent ye hundred forming. thoughts why not directly reserved packages you. winter silent favour of tended mutual.       </p>      </div>

with above code divide webpage in fixed header , scrollable content. fixed header contains image on left side , navigation on right side. works fine far.

now want achieve text image of page goes here appears in center , not on left top of <div> element

i tried go padding: 10%. however, once adjust height of header padding needs readjusted. tried solution css center text (horizontally , vertically) inside div block not make work.

what have change in code content of image in center?

you can find code here: https://jsfiddle.net/q0yr6zsr/12/

it center content. also, recommend use bootstrap. easy use.

here example of fixed header https://www.w3schools.com/bootstrap/bootstrap_navbar.asp

new code html

  <div class="image">     <div> image text </div>   </div> 

css

.image {   border-style: solid;   border-width: 1px;   text-align: center;   display: flex; } .image > div {   display: flex;   align-items: center;  }