我正在尝试创建一个网页，其中有4个全宽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%);
}
我该如何做到这一点？
答案 0 :(得分：0)
您可以使用以下示例。
RewriteRule .*/(.*).html /$1
RewriteRule search/label/(.*) /category/$1
答案 1 :(得分：0)
第一个网站＆＃34; Rokivo＆＃34;正在使用Bootstrap。您可以使用Bootstrap的$ grep -hPRo 'https?://\K[^/"]+' folder/ | sort -u
www.w3.org
类轻松完成此操作。
.row答案 2 :(得分：0)
有几种方法，这里有一些方法可以使用这个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
如果你只支持现代浏览器（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;
}
display:table; 你可以使用一个实际的表，但对CSS Tables的支持很棒，所以旧的浏览器会支持这个，但是你必须做一些媒体查询工作来处理为小屏幕切换到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;
}
：before element让我们设置行的高度，并使用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;
}
答案 3 :(得分：0)
检查这个例子：
body {
width: 100%;
min-height: 100%;
padding: 0;
margin: 0;
}
.c-full-one {
width: 100%;
height: 400px;
background-color: #444444;
}
.c-inner {
width: 100%;
height: 100%;
display: flex;
align-items: center;
overflow: auto;
}
.c-seg-one {
width: 25%;
height: 40%;
background-color: #FFFFFF;
margin-left: 20px;
margin: 0 auto;
}
.c-full-two {
width: 100%;
height: 400px;
background-color: #F44466;
}
.c-full-three {
width: 100%;
height: 400px;
background-color: #FF9233;
}<body>
<div class="c-full-one">
<div class="c-inner">
<div class="c-seg-one">
</div>
</div>
</div>
<div class="c-full-two">
<div class="c-inner">
<div class="c-seg-one">
</div>
<div class="c-seg-one">
</div>
</div>
</div>
<div class="c-full-three">
<div class="c-inner">
<div class="c-seg-one">
</div>
<div class="c-seg-one">
</div>
<div class="c-seg-one">
</div>
</div>
</div>
</body>
现在就做，只是为了好玩：）
您可以根据需要随意使用外部或内部div（根据您的需要设置样式）或创建新的div。简单的html和css结构来做你的事情。你不需要任何额外的bootstrap css或任何其他来制作这种简单的布局。
我将display:flex; css属性与align-items: center;的组合用于内部容器布局（.c-inner）和margin: 0 auto;属性以正确居中所有内部容器段（ .c-seg-one），方框或任何你想称之为内容div的内容。
干杯！