以CSS为中心

Question

我似乎无法将此栏放在页面的中心

的中心

我的代码

#menu-header {
  background-color: #009376;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 2px;
  padding-left: 3px;
  width: 900px;
  display: flex;
  align-self: center;
}

<div><br></br>
  <nav className="navbar navbar-default">
    <div className="container">
      <div className="navbar-header">
        <br/>
        <div>
          <div id="menu-header" className="col-xs-10 col-xs-offset-1">
            <h4>&emsp;Cocktails</h4>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

任何帮助都非常感谢，谢谢

Answer 1

如果要在屏幕上垂直将DIV居中，则可以使用定位，或者可以使用保证金。

单元VH用于获取垂直屏幕高度。

eg：

height: 100vh // gets the full height of the screen

保证金 - top方法

#menu-header{
 background-color:#009376;
 padding-top:3px;
 padding-right:3px;
 padding-bottom:2px;
 padding-left:3px;
 width: 900px;
 display: flex;
 align-self: center;
 margin-top: calc( 50vh - 33px );
}

但是，在这种方法中，您更有可能浪费顶级空间。

定位

#menu-header{
 background-color:#009376;
 padding-top:3px;
 padding-right:3px;
 padding-bottom:2px;
 padding-left:3px;
 width: 900px;
 display: flex;
 align-self: center;
 position: absolute;
 top: calc( 50vh - 33px );
}

在这里，DIV是绝对定位的，并给出了最高值。

https://jsfiddle.net/sinthu225/hp2ubyml/

在两个解决方案中，我通过获取实际屏幕高度的一半并扣除DIV高度的一半来计算顶部/保证金最高值

Answer 2

我认为您最好使用 -

.menu-header-parent {
  display: flex;
  justify-content: center;
}
#menu-header {
  background-color: #009376;
  padding-top: 3px;
  padding-right: 3px;
  padding-bottom: 2px;
  padding-left: 3px;
  width: 900px;
  display: block;
}

<div><br></br>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <br/>
        <div class="menu-header-parent">
          <div id="menu-header" class="col-xs-10 col-xs-offset-1">
            <h4>&emsp;Cocktails</h4>
          </div>
        </div>
      </div>
    </div>
  </nav>
</div>

此处为推荐链接供您理解display: flex。我希望如果有其他任何事情可以问的话，这对您有所帮助。

Answer 3

请找到以下代码以将其带到中间，唯一需要做的是，您应该提供DIV的高度和宽度。

#navbar-header {
    position: relative;
}
#menu-header{
  background-color:#009376;
  padding-top:3px;
  padding-right:3px;
  padding-bottom:2px;
  padding-left:3px;
  width: 900px;
  height: 400px;
  display: flex;
  align-self: center;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}