在垂直居中内容时设置容器的响应高度
Posted
技术标签:
【中文标题】在垂直居中内容时设置容器的响应高度【英文标题】：Setting a responsive height to a container while vertically centering content 【发布时间】：2016-06-20 13:16:19 【问题描述】：我正在尝试解决当有人最小化浏览器窗口时容器的高度应该响应的问题。该容器中的内容也应保持垂直居中。
这是我目前在 CodePen 中的内容：http://codepen.io/anon/pen/PNZzoe
容器是包含一些文本的蓝色框。调整浏览器窗口大小时，蓝色框应与虚拟图像具有相同的高度。
感谢您的帮助！
CodePen 中的代码：
<html>
<head>
</head>
<body>
<div class="grid_12 alpha omega" id="LLcontentCont">
<!-- Row 1 -->
<div class="LLrow" id="LLrow1">
<div class="LLcontent">
<div class="grid_4 LLFR alpha">
<div class="LLtext">
<h3>HEADER</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit tristique sem, dictum ornare lectus.</p>
</div>
</div>
<div class="grid_8 omega">
<a href="" title=""><img src="http://dummyimage.com/868x500/00e1ff/000.gif&text=dummy+image" ></a>
</div>
</div>
</div>
<!-- /Row 1 -->
<!-- Row 2 -->
<div class="LLrow" id="LLrow2">
<div class="LLcontent">
<div class="grid_8 alpha">
<a href="" title=""><img src="http://dummyimage.com/868x500/00e1ff/000.gif&text=dummy+image" ></a>
</div>
<div class="grid_4 LLFL omega">
<div class="LLtext">
<h3>HEADER</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam hendrerit tristique sem, dictum ornare lectus.</p>
</div>
</div>
</div>
</div>
<!-- /Row 2 -->
</div>
</body>
</html>
CSS
body
width: 100%;
background: #ccc;
#LLcontentCont width: 100%;
#LLcontentCont,
.LLrow,
.grid_4,
.grid_8
float: left;
display: inline;
position: relative;
.LLrow
width: 100%;
margin: 10px 0 0;
.LLcontent
min-width: 976px;
margin: 0 auto;
max-width: 1200px;
width: 100%;
.LLcontent .grid_4
display: table;
height: 100%;
background: #0091ff;
width: 26%;
.LLcontent .grid_8
height: 100%;
width: 72.3%;
.LLcontent .grid_8 img
width: 100%;
.LLtext
display: table-cell;
vertical-align: middle;
【问题讨论】：
【参考方案1】：删除所有其他显示属性并将display: flex; 分配给.LLcontent 和.LLcontent .grid_4。 align-items: center; 到 .LLcontent .grid_4 将为您工作。
CSS：
.LLcontent
min-width: 976px;
margin: 0 auto;
max-width: 1200px;
width: 100%;
display: flex;
.LLcontent .grid_4
background: #0091ff;
width: 26%;
display: flex;
align-items: center;
.LLcontent .grid_8
width: 72.3%;
.LLcontent .grid_8 img
width: 100%;
Working Fiddle
【讨论】：
以上是关于在垂直居中内容时设置容器的响应高度的主要内容，如果未能解决你的问题，请参考以下文章