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

Question

我需要将3个div对齐到网页的顶部,中间和底部以下是我当前的代码.

JS小提琴

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

我尝试过使用table/table-cell方法,但每个部分并排放置.

需要修复容器,导航应垂直对齐.

任何想法都是这样,logo div位于顶部,nav div位于中间,base div位于底部？

Answer 1

你可以用CSS表做,我<div>给每个块添加了一个.

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

您也可以使用flexbox布局.

的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

我相信我已经创建了您的解决方案。

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 输出视图

我为底座和导航创建了固定位置以进行垂直对齐。