引導容器垂直居中

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應用於該代碼段，該代碼段已生成了body標簽，但無法對其進行訪問和添加類

 /* 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-->

引導容器垂直居中

問題描述

2 個解決方案

解決方案1
0 2017-11-13 11:53:15

解決方案2
0 2017-11-13 11:55:54

引導容器垂直居中

問題描述

2 個解決方案

解決方案1 0 2017-11-13 11:53:15

解決方案2 0 2017-11-13 11:55:54

解決方案1
0 2017-11-13 11:53:15

解決方案2
0 2017-11-13 11:55:54