html - Flat-Style Div 排列问题

Question

我正在尝试制作一个网页，其中包含 4 个全 Angular div，其中的信息垂直居中。有点像这些:

http://www.rokivo.com/
https://dribbble.com/shots/2582917-Klas-Ranking-Landing-Page

我曾尝试使用 3 个分隔线使元素居中，但我无法像示例中那样使 div 对齐。这是基本代码:

<div id="elem1">
  <div class="outerDiv">
    <div class="middleDiv">
      <div id="content">
        <!-- Content Here-->
      </div>
    </div>
  </div>
</div>
<div id="elem2">
  <div class="outerDiv">
    <div class="middleDiv">
      <div id="content2">
        <!-- Content Here-->
      </div>
    </div>
  </div>
</div>


outerDiv {
  height: 90%;
  width: 100%;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}
middleDiv {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

我怎样才能做到这一点？

Answer 1

有几种方法，这里有一些所有方法都适用于此 html:

<div class="row">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="column">4</div>
</div>

codepen 中的所有三个示例:http://codepen.io/ijmccallum/pen/RaGjOZ

选项 1:Flexbox

如果您只支持现代浏览器(我认为是 ie9+)，这是可行的方法，它简单易行，并为您提供了大量可供选择的选项。如果有人感兴趣，我已经写了一篇关于它如何工作的文章:http://delphicdigital.com/blog/css-layout-techniques-part-2 (不要脸的自插!)

.row { 
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height:50px; 
  background: #eee;
}

.column {
  background: #ccc;
  width: 20%;
  padding: 10px;
  text-align: center;
}

选项 2:display:table;

您可以使用实际的表格，但对 CSS 表格的支持非常棒，因此较旧的浏览器将支持此功能，但您必须执行一些媒体查询操作才能处理为较小的屏幕切换到 2 列或 1 列的问题。

相同的 html

.row { 
  display: table;
  width: 100%;
  min-height:50px; 
  background: #eee;
}

.column {
  display: table-cell;
  vertical-align: middle;
  background: #ccc;
  width: 20%;
  padding: 10px;
  text-align: center;
}

选项 3:内联 block ，带有一点技巧

:before 元素让我们设置行的高度并使用 vertical-align 进行垂直居中。与 CSS Tables 一样，它也有惊人的支持，而且它可以在较小的屏幕上换行，这是一个很好的优势。

.row { 
  width: 100%;
  background: #eee;
  text-align: center;
}

.row:before {
  content: " ";
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 50px;
}

.column {
  display: inline-block;
  vertical-align: middle;
  background: #ccc;
  width: 20%;
  padding: 10px;
  text-align: center;
}