Question

我的页面由导航栏和包含两个面板的容器组成。

我想垂直居中我的容器。导航栏必须保持最佳状态。

现在我有这个：

我想实现这个目标：

这是我的代码：

HTML

<body>

  <nav class="navbar transparent navbar-static-top">

    <div class="navbar-header">
      <p>Welcome</p>
    </div>

  </nav>

  <div class="container d-flex h-100">

    <div class="row justify-content-center align-self-center">

      <!-- 1st panel -->
      <div class="col-md-4 mb-4" id="panel">

        <div class="panel panel-default1">

          <div class="panel-body">

            <p>Blablabla</p>

          </div>
          <!-- panel body -->
        </div>
        <!-- panel-default1-->
      </div>
      <!-- col md 4 -->

      <!-- 2nd panel -->

      <div class="col-md-8 col-md-8" id="panel2">

        <div class="panel panel-default2">

          <div class="panel-body">

            <p>Blablabla</p>

          </div>
          <!-- panel-body -->

        </div>
        <!-- panel-default2-->

      </div>
      <!-- col md 8 -->

    </div>
    <!-- row -->

  </div>
  <!-- container-->

</body>

CSS

html {
  overflow: hidden;
  height: 100%;
}

body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

.panel-default1 {
  padding-top: 8px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 100%;
  overflow: hidden;
  margin: 0 auto;
  position: relative;
}

.panel-default2 {
  padding-top: 10px;
  padding-right: -15px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 400px;
  width: 100%;
  margin: 0 auto;
  position: relative;
}

我没有成功地将容器垂直放在中心位置。

请告知清洁且有效的解决方案。

Answer 1

我不久前尝试过类似的东西，发现通过简单的CSS比通过Bootstrap类更容易解决，即使因为它是一个CSS限制（<body>还没有得到100高度％，因为没有足够的内容填充它。）

我正在调整我的样式表，因此只有.container元素才能使其内容居中。

html, body, .container {
    height: 100%;
    overflow-x: hidden;
}

body, .container {
    display: flex;
}

.container {
    align-items: center;
}

Answer 2

您可以使用以下类：

到正文d-flex，flex-column
到容器m-auto

CSS代码段中已经生成的片段，正文标记中应用了CSS，无法访问并向其添加类

/* these below can be applied through classes .d-flex,flex-column,m-auto , .. */
body {
  display: flex;
  flex-flow: column;
  height: 100vh;
}

.container {
  margin: auto;
}
/* end update */

/* removed a few things that did not seem useful, add back what you really need /
html {
  height: 100%;
}

body {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px;
}

.panel-default1 {
  padding: 8px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 100px;
}

.panel-default2 {
  padding: 10px;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);
  height: 100px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">


<nav class="navbar transparent navbar-static-top">

  <div class="navbar-header">
    <p>Welcome</p>
  </div>

</nav>

<div class="container d-flex h-100">

  <div class="row justify-content-center align-self-center">

    <!-- 1st panel -->
    <div class="col-md-4 mb-4" id="panel">

      <div class="panel panel-default1">

        <div class="panel-body">

          <p>Blablabla</p>

        </div>
        <!-- panel body -->
      </div>
      <!-- panel-default1-->
    </div>
    <!-- col md 4 -->

    <!-- 2nd panel -->

    <div class="col-md-8 col-md-8" id="panel2">

      <div class="panel panel-default2">

        <div class="panel-body">

          <p>Blablabla</p>

        </div>
        <!-- panel-body -->

      </div>
      <!-- panel-default2-->

    </div>
    <!-- col md 8 -->

  </div>
  <!-- row -->

</div>
<!-- container-->

Bootstrap Container垂直居中

2 个答案: