使用中心块引导垂直对齐答案

【问题标题】：Bootstrap vertical align using center-block使用中心块引导垂直对齐
【发布时间】：2016-10-14 08:53:54
【问题描述】：

我已经用引导类属性中心块制作了 div，我想垂直对齐它，但没有任何工作只能手动添加边距到 div。任何提示如何做到这一点？ CSS代码：

body {
  margin-bottom: 31px;
  font-family: 'Lato', sans-serif;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 31px;
  border-top: 1px solid white;
}
.menu{
  width: 642px;
  height: 642px;
  border: 1px solid white;

}
.menu > p{
  width: 300px;
  height: 300px;
  margin: 10px;
  float: left;
  color: white;
  text-align: center;
  font-size: 28px;
  text-shadow: 2px 2px 5px black;
}

html代码：

     <!DOCTYPE html>
    <html lang="en">
    <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
      <style>
      body{
        background-image: url(img/landscape1.jpg);
        background-size: cover;
      }
      </style>
      <title>Website</title>
    </head>
    <body>
      <div class="container-fluid">
        <div class="page-header">
          <h1 style="color: white;">Logo</h1>
        </div>
        <div class="center-block menu">
          <p id="">demo1</p>
          <p id="">demo2</p>
          <p id="">demo3</p>
          <p id="">demo4</p>
        </div>
      </div>
        <footer class="footer">
            <div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
            <p class="text-muted">Company all rights reserved &copy; </p>
          </div>
        </footer>





    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    </body>
    </html>

【问题讨论】：

我不明白你想要达到什么目的。垂直居中什么？中心区？将其与整个页面对齐？
我添加了边框以更好地查看正在谈论的内容并包含整个代码。 Div 居中，但仅水平而不是垂直。
具有 center-block 类的 div 不能垂直对齐，因为它不在具有更大高度的元素内。 “container-fluid”没有高度，所以它会和里面的内容一样高（中心块 div）。 container-fluid 的父级（body 和 html 标签）也是如此。因此，您需要将其包装在更高的容器中。请参阅我对 codepen 的回答

标签： html css twitter-bootstrap-3

【解决方案1】：

具有 center-block 类的 div 不能垂直对齐，因为它不在具有更大高度的元素内。 “container-fluid”没有高度，所以它会和里面的内容一样高（中心块 div）。 container-fluid 的父级（body 和 html 标签）也是如此。所以你需要把它包在一个更高的容器里。我做了一支笔来说明。

http://codepen.io/ugreen/pen/GjBWWZ

神奇的是这个家伙：

.flex {
  display: flex;
  align-items: center;
  height: 100%;
  border: 1px solid red;
}

【讨论】：

【解决方案2】：

body {
  margin-bottom: 31px;
  font-family: 'Lato', sans-serif;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 31px;
  border-top: 1px solid white;
}
.menu{
  width: 640px;
  height: 640px;
}
.menu li > p{
  width: 200px;
  color: white;
  text-align: left;
  font-size: 28px;
  text-shadow: 2px 2px 5px black;
}
ul {
  list-style-type: none;
}

<html>
  
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
<div class="container-fluid">
    <div class="page-header">
      <h1 style="color: white;">Text Logo</h1>
    </div>
    <ul>
    <div class="center-block menu">
    <li> <p id="1">demo1</p></li>
     <li> <p id="2">demo2</p></li>
     <li> <p id="3">demo3</p></li>
     <li><p id="4">demo4</p><li>
    </div>
    </ul>
    
  </div>
<footer class="footer">
    <div class="container col-lg-6 col-md-6 col-sm-6 col-xs-6">
    <p class="text-muted">Company all rights reserved &copy; </p>
  </div>
</footer>
</body>
</html>

【讨论】：