如何将3个div对齐到页面的顶部中间和底部？

Question

I need to align 3 divs to the top, middle and bottom of a webpage Below is my current code.

JS Fiddle

<div class="container">
    <div class="logo">
        My Logo
    </div>
    <div class="nav">
        My Nav
    </div>
    <div class="base">
       Base
    </div>   
</div>

I have tried using table/table-cell method but each section then sits side by side.

The container needs to be fixed and the nav should be vertically aligned.

Any ideas to make is so the logo div is at the top, the nav div is in the middle and the base div is at the bottom?

Answer 1

You could do it with CSS table, I added a <div> to each block.

jsfiddle

 html, body { height: 100%; margin: 0; } .container { background: gold; width: 100%; height: 100%; display: table; } .container .row { display: table-row; } .container .cell { display: table-cell; } .logo .cell { vertical-align: top; } .nav .cell { vertical-align: middle; } .base .cell { vertical-align: bottom; } 

 <div class="container"> <div class="row logo"> <div class="cell">My Logo</div> </div> <div class="row nav"> <div class="cell">My Nav</div> </div> <div class="row base"> <div class="cell">Base</div> </div> </div> 

You could also make it with flexbox layout.

jsFiddle

 body { margin: 0; } .container { background: gold; height: 100vh; display: flex; flex-direction: column; justify-content: space-between; } 

 <div class="container"> <div class="row logo">Logo</div> <div class="row nav">Nav</div> <div class="row base">Base</div> </div> 

Answer 2

I have created your solution I believe.

HTML:

<div class="container">
<div class="logo">
    My Logo
</div>
<div class="nav">
    My Nav
</div>
<div class="base">
    Base
</div>   

CSS:

.container{
    width: 200px;
    height: 100%;
    background: gold;
    position: fixed;
}

.logo{
    background: blue;
    width:100%;
}

.nav{
    background: tan;
    width: 200px;
    position: fixed;
    top: 50%;
    transform: translateY(-50%); /*nudge the div back to the center*/
}

.base{
    background: aqua;
    width:200px;
    position: fixed;
    bottom: 0;
}

JSFiddle view of the output

I created fixed positions for the base and nav to give vertical alignment.