PureCSS 垂直居中/中间 div 元素答案

【问题标题】：PureCSS vertical center/middle div elementsPureCSS 垂直居中/中间 div 元素
【发布时间】：2015-04-05 09:26:13
【问题描述】：

我正在尝试将我的 div 元素 (PureCSS) 居中以构建这样的网格（100% 宽度和高度，无滚动条）：

现在我需要将所有元素垂直和水平居中对齐。

这是我的 HTML 代码：

<div class="pure-g" style="height:100%;">
      <div class="pure-u-1-5" style="height:90%;">
        <div class="pure-g" style="height:50%;">
          <div class="pure-u-1-1 visible"><img src="img/logo.png" alt="Logo" style="width:100%;"></div>
          <div class="pure-u-1-1 visible"><img src="img/ad.png" alt="AD" style="width:100%;"></div>
        </div> 
      </div>
      <div class="pure-u-4-5" style="height:90%;">
        <div class="pure-g" style="height:100%;">

          <div class="pure-u-1-1" style="height:20%;">
            <div class="pure-g" style="height:100%;">
              <div class="pure-u-1-6 news"><p>PIC</p></div>
              <div class="pure-u-1-3 news"><p>TITLE</p></div>
              <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
              <div class="pure-u-1-12 news"><p>ID</p></div>
            </div>
          </div>

          <div class="pure-u-1-1" style="height:20%;">
            <div class="pure-g" style="height:100%;">
              <div class="pure-u-1-6 news"><p>PIC</p></div>
              <div class="pure-u-1-3 news"><p>TITLE</p></div>
              <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
              <div class="pure-u-1-12 news"><p>ID</p></div>
            </div>
          </div>

          <div class="pure-u-1-1" style="height:20%;">
            <div class="pure-g" style="height:100%;">
              <div class="pure-u-1-6 news"><p>PIC</p></div>
              <div class="pure-u-1-3 news"><p>TITLE</p></div>
              <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
              <div class="pure-u-1-12 news"><p>ID</p></div>
            </div>
          </div>

          <div class="pure-u-1-1" style="height:20%;">
            <div class="pure-g" style="height:100%;">
              <div class="pure-u-1-6 news"><p>PIC</p></div>
              <div class="pure-u-1-3 news"><p>TITLE</p></div>
              <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
              <div class="pure-u-1-12 news"><p>ID</p></div>
            </div>
          </div>

          <div class="pure-u-1-1" style="height:20%;">
            <div class="pure-g" style="height:100%;">
              <div class="pure-u-1-6 news"><p>PIC</p></div>
              <div class="pure-u-1-3 news"><p>TITLE</p></div>
              <div class="pure-u-5-12 news"><p>DESCRIPTION</p></div>
              <div class="pure-u-1-12 news"><p>ID</p></div>
            </div>
          </div>       

        </div> 
      </div>
      <div class="pure-u-1-1 marquee">NEWSTICKER (jQuery marquee)</div>
    </div>

这是我的 CSS：

*{font-family:'Raleway', sans-serif;}

h1, h2, h3, p {color:#fff;}

body, html {
    overflow:hidden;
  height: 100%;
  padding:0px;
}

div {
  /*
  border:1px solid;
  margin:-1px;
  */
}

.news {
  height:100%;
    position:relative;
    background:#444; background:rgba(0,0,0,.5);
    margin:0px 0px 0px 0px;
    border-radius:0px;
    margin-bottom:0px;
}

.visible {
  height:100%;
    position:relative;
    background:#444; background:rgba(0,0,0,.5);
    margin:0px 0px 0px 0px;
    border-radius:0px;
    margin-bottom:0px;
}

.news p {
  text-align: center;
  vertical-align: middle;
  margin:15px;
  height:100%;
}

.marquee {
    height:100%;
    position:relative;
    background:#444; background:rgba(0,0,0,.5);
    margin:0px 0px 0px 0px;
    padding:0px;
    border-radius:0px;
    margin-bottom:0px;
    font-family:'Raleway', sans-serif;
    color:#fff;
}

结果是这样的：

我阅读了一些关于这个问题的线程，但它们似乎都不适合我让 div 元素垂直居中。如果你们中的任何人发现一些代码改进，我也会很高兴，因为这是我第一次构建这样的网格。

提前致谢

【问题讨论】：

您的.news p 与height:100% 的父级相比具有100% 的高度。使用PX 高度并将行高指定为相同。
嗨@Pogrindis 谢谢，你是对的。但是更改它并不能解决我原来的问题，这些项目仍然位于顶部。高度必须以百分比为单位（右侧：90%，内部 5x20%）以使其尽可能响应
pureCSS 不是已经响应内置定义了吗？
对于宽度是，但不是高度。页面必须垂直和水平填充屏幕，没有滚动条
这是一项危险的任务。很难保证你永远不需要滚动条！

标签： html css alignment center

【解决方案1】：

我会保持简单，没有第三者。

这是我将使用的基本框架。

我不会使图像可扩展。对于智能手机中那些懦弱的 ARM 处理器来说，工作量太大了。我会修复左列和图片 div 的宽度

我在 div 上放置了临时彩色边框。

CSS

#col1{width:14%;position:absolute;top:0;left:0;}
#col2{width:84%;position:absolute;top:0;right:0;}
#logo{width:200px;height:200px;}
.row{width:100%;border:4px solid #000;display:inline-block;}
.pic{width:15%;border:1px solid #00f;display:inline-block;}
.title{width:30%;border:1px solid #f00;display:inline-block;}
.desc{width:40%;border:1px solid #0ff;display:inline-block;}
.id{width:10%;border:1px solid #f0f;display:inline-block;}
#marquee{height:6em;}<br>

HTML

<div id="col1">
<div id="logo"><img src="img/logo.png" alt="Logo"></div>
<div id="ad"><img src="img/ad.png" alt="AD" ></div>
</div>
<div id="col2">
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div class="pic"><p>PIC</p></div><div class="title"><p>TITLE</p></div><div class="desc"><p>DESCRIPTION</p></div><div class="id"><p>ID</p></div></div>
<div class="row"><div id="marquee">Breaking News</div></div></div>
</div>

【讨论】：

嗨，很抱歉我的回复晚了，非常感谢您的简化。我总是喜欢保持简单。我尝试并喜欢您的解决方案，但是如何让 #col2 使用 100% 的可用高度？提前致谢
行数和它们的高度决定了高度。每行的高度由字体大小和填充确定。问题是您永远不会知道客户端窗口的高度。我在纵向模式下使用我的显示器，我的高度是 1920 像素。根据 Statcounter，目前最流行的高度是 768px。您希望没有滚动条、使用 100% 的可用高度以及没有 JavaSript 可能是不现实的，因为它取决于客户端窗口的高度。

【解决方案2】：

这是我用来垂直和水平居中的 CSS / HTML：

<html>
<head>

<style type="text/css" media="screen">
.center-outter {
    display: table; 
    position: absolute; 
    height: 100%; 
    width: 100%;
}
.center-middle { 
    display: table-cell; 
    vertical-align: middle; 
}
.center-inner { 
    margin-left: auto; 
    margin-right: auto; 
    /*width:200px;*/
}

.whatever {
    width:200px; 
    background:#efefef;
}
</style>

</head>
<body>

    <div class="center-outter">
        <div class="center-middle">
            <div class="center-inner whatever">
                <div>This should be centered vertically and horizontally</div>
            </div>
        </div>
    </div>

</body>
</html>

【讨论】：