如何将 div 沿 y 轴居中？答案

【问题标题】：How do I center a div along the y axis?如何将 div 沿 y 轴居中？
【发布时间】：2016-01-31 20:58:33
【问题描述】：

我想将我的div 元素与类块和text-center 对齐，不仅水平而且垂直。我尝试向其添加margin-top，但这最终将其父元素#home与其上方的ul分开。您需要在任何jpeg 中加入background 的#home 图像（在我的css 下方加粗）才能明白我的意思。我希望显示完整图像，使其顶部接触ul，就像现在一样，但我也想在不改变其大小的情况下将#home 内部的div 向下移动。我怎样才能做到这一点？另请注意，我使用的是引导 css 模板，因此是类名。

HTML：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
 <link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
 <link rel="stylesheet" type="text/css" href="css/porfolioPage.css"/>
 <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
 </style>
</head>
<body>
  <div class="container-fluid">
    <ul id="contents" class="nav nav-pills">
      <li>
        <a href="#" id="productions">In Production</a>
      </li>

      <li class="pull-right">
         <a href='#'>Contact</a>
      </li>
      <li class="pull-right">
        <a href='#'>Portfolio</a>
      </li>

      <li class="pull-right">
        <a href='#'>About</a>
      </li>
      <li class="pull-right">
         <a href='#'>Home</a>
      </li>
    </ul>

  <div id="home">
    <div class="block text-center">
      <h1 class="homeHeading">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading">Developing</h3>
    <div class="btnList">
      <a class="btn btn-primary" href="#">Twitter</a>
      <a class="btn btn-primary" href="#">Facebook</a>
      <a class="btn btn-primary" href="#">Linkedin</a>
      <a class="btn btn-primary" href="#">Github</a>
    </div>
   </div>
  </div>
  </div>
</body>
</html>

CSS：

body{
    font-family: "avenir";
    font-weight:500;
}
.nav-pills{
    font-family:arial;
    font-size:2.0em;
    background-color:black;
}
#productions{
    font-family:Lobster;
}
#home{
    **background-image:url(snoopAndZuck.jpg);**
    background-size:cover;
    height:800px;
}

.btn-primary{
    font-size:1.7em;
}
h1{
    font-size: 4em;
}
.homeHeading{
    margin:0 0 0 0;
    padding:0px;

}
.block{
    opacity:.7;
    background-color: #000000;
    padding:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
    }

【问题讨论】：

你能在某处分享一个工作链接或 jsfiddle 吗？
How to center an element horizontally and vertically?的可能重复

标签： html css

【解决方案1】：

看看这个：

http://codepen.io/xvariant/pen/mVKjzx

body {
  font-family: "avenir";
  font-weight: 500;
}
.nav-pills {
  font-family: arial;
  font-size: 2.0em;
  background-color: black;
}
#productions {
  font-family: Lobster;
}
#home {
  background: red;
  height: 800px;
}
.btn-primary {
  font-size: 1.7em;
}
h1 {
  font-size: 4em;
}
.homeHeading {
  margin: 0 0 0 0;
  padding: 0px;
}
.block {
  opacity: .7;
  background-color: #000000;
  padding: 10px;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul id="contents" class="nav nav-pills">
    <li>
      <a href="#" id="productions">In Production</a>
    </li>

    <li class="pull-right">
      <a href='#'>Contact</a>
    </li>
    <li class="pull-right">
      <a href='#'>Portfolio</a>
    </li>

    <li class="pull-right">
      <a href='#'>About</a>
    </li>
    <li class="pull-right">
      <a href='#'>Home</a>
    </li>
  </ul>

  <div id="home">
    <div class="block text-center">
      <h1 class="homeHeading">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading">Developing</h3>
      <div class="btnList">
        <a class="btn btn-primary" href="#">Twitter</a>
        <a class="btn btn-primary" href="#">Facebook</a>
        <a class="btn btn-primary" href="#">Linkedin</a>
        <a class="btn btn-primary" href="#">Github</a>
      </div>
    </div>
  </div>
</div>

你需要 top 指定到父 div 顶部的距离。然后将子 div 向上移动其自身高度的一半。

【讨论】：

【解决方案2】：

不看您的代码，我喜欢使用 calc 使 div 垂直居中。

div {
    width:200px;
    height:200px;
    top:calc(50% - 100px); /* 100px is half the height..*/
    position:absolute;
    background:red;
}

https://jsfiddle.net/foreyez/rLwsv019/

【讨论】：

Absolute 对我不起作用，因为它会使 div 中的文本不对齐 :(。感谢您的尝试！

【解决方案3】：

我在 "block" 类的开始之前放置了一个 CSS 样式 "padding: 25px" 的空格。

https://jsfiddle.net/sadika/y8h1eLrq/

让我知道这是否对您有帮助，或者我可以帮助您做您想做的事情。

CSS：

<style>
body{
    font-family: "avenir";
    font-weight:500;
      margin:0px;
      padding:0px;
}
.nav-pills{
    font-family:arial;
    font-size:2.0em;
    background-color:black;
}
#productions{
    font-family:Lobster;
}
#home{
    /*background-image:url(snoopAndZuck.jpg);*/
    background-image: url(http://lorempixel.com/1600/400/nature/); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height:800px;
}
.btn-primary{
    font-size:1.7em;
}
h1{
    font-size: 4em;
}
.homeHeading{
    margin:0 0 0 0;
    padding:0px;
}
.block{
    opacity:.7;
    background-color: #000000;
    padding:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
}

@media (max-width: 578px) {
    .btnList a {
        margin: 2px 0px;
    }
}
</style>

HTML：

<body>
<div class="container-fluid" style="padding: 0px; margin: 0px;">
    <ul id="contents" class="nav nav-pills">
      <li>
        <a href="#" id="productions">In Production</a>
      </li>

      <li class="pull-right">
         <a href='#'>Contact</a>
      </li>
      <li class="pull-right">
        <a href='#'>Portfolio</a>
      </li>

      <li class="pull-right">
        <a href='#'>About</a>
      </li>
      <li class="pull-right">
         <a href='#'>Home</a>
      </li>
    </ul>

  <div id="home">
    <div style="padding:25px;"></div>
    <div class="block text-center">
      <h1 class="homeHeading" style="color:white;">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading" style="color:white;">Developing</h3>
    <div class="btnList">
      <a class="btn btn-primary" href="#">Twitter</a>
      <a class="btn btn-primary" href="#">Facebook</a>
      <a class="btn btn-primary" href="#">Linkedin</a>
      <a class="btn btn-primary" href="#">Github</a>
    </div>
    </div>
  </div>
  </div>
  <body>

【讨论】：

【解决方案4】：

尝试添加到 CSS 部分：

line-height: XXXpx; (or XXX%)

它适用于文本，但它也可能适用于 div 我从未尝试过...但我祝你好运:)

【讨论】：