Html 设置容器的响应高度，同时使内容垂直居中_Html_Css

Html 设置容器的响应高度，同时使内容垂直居中

html css

Html 设置容器的响应高度，同时使内容垂直居中,html,css,Html,Css,我试图解决一个问题，当有人最小化浏览器窗口时，容器的高度应该是响应的。该容器中的内容也应该保持真正的中心位置以下是迄今为止我在CodePen中获得的信息：容器是包含一些文本的蓝色框。调整浏览器窗口大小时，蓝色框的高度应与虚拟图像的高度相同谢谢你的帮助代码笔中的代码： HTML 删除所有其他显示属性并给出display:flex到.LLcontent和.LLcontent.grid\u 4。和对齐项目：居中到.LLcontent.grid_4将适用于您 Css: <html>

我试图解决一个问题，当有人最小化浏览器窗口时，容器的高度应该是响应的。该容器中的内容也应该保持真正的中心位置

以下是迄今为止我在CodePen中获得的信息：

容器是包含一些文本的蓝色框。调整浏览器窗口大小时，蓝色框的高度应与虚拟图像的高度相同

谢谢你的帮助

代码笔中的代码：

HTML

删除所有其他显示属性并给出

display:flex

到

.LLcontent

和

.LLcontent.grid\u 4

。和

对齐项目：居中

到

.LLcontent.grid_4

将适用于您

Css:

<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" alt=""></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" alt=""></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>

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;
}

.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%;
}