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

我认为你最好使用 -

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

此处为referral link，供您了解display: flex。如果还有其他任何事情可以随意提问，我希望这对你有所帮助。

Answer 2

如果你想在屏幕上垂直居中div，你可以使用定位，也可以使用margin-top。

单位vh用于获取垂直屏幕高度。

例如：

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

保证金最高法

#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 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;
}

以Css为中心的盒子

3 个答案: