为什么我的 div 不能水平和垂直居中？

Question

我无法将 #content 居中到页面中间，我觉得我已经尝试了所有方法。

我想我可能没有将我的 CSS 指向右侧 div id，但到目前为止我只设法让 <a> 标签在顶部居中页面的。我在网上搜索了一下，发现解决这个问题的常用方法是添加：

position: absolute;
width: 100%;
height: 100%;
margin: 0 auto;
top: 0; 
left: 0; 
right: 0; 
bottom: 0;

但到目前为止还没有运气。帮助将不胜感激！

HTML:

<!DOCTYPE html>
<html>

<head>

  <meta charset="utf-8">
  <meta name="description" content="About the band">
  <meta name="author" content="MH">

  <title>T</title>

  <!-- Custom css -->
  <link rel="stylesheet" type="text/css" href="css/style.css">

  <!-- Bootstrap css -->
  <link rel="stylesheet" href="css/bootstrap.min.css">

  <!-- JS -->
  <script src="js/bootstrap.min.js"></script>

  <!-- Font Links -->
  <link href='https://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

</head>

<body>

  <div class="container-fluid">

    <!-- <div class="logo">
    </div> -->

    <div id="content" class="content row">

      <div id="nav-homepage" class="nav-homepage">

          <a class="page-scroll news" href="#news">News</a>
          <a class="page-scroll events" href="#events">Events</a>
          <a class="page-scroll store" href="#store">StØre</a>


      </div>
    </div>


  </div>

</body>

</html>

CSS:

body {
  background: url(../images/mainImage.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
  background-position: center center;
}

#content {
  position: absolute;
  width: 100%;
  height: 100%;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
}

Answer 1

试试这个代码：

css

.content {
    width: 200px;
    height: 600px;
    background-color: blue;

    position:absolute;
    left:0; right:0;
    top:0; bottom:0;
    margin:auto;

    max-width:100%;
    max-height:100%;
    overflow:auto;
}
.background {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background-color: yellow;
}

查看这些演示：

Demo 1

Demo 2

Answer 2

试试这个 CSS:

body {
  background: url(../images/mainImage.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow-x: hidden;
  background-position: center center;
}

/* Theis will center your content element */
#content {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}

Answer 3

已编辑

试试这个代码：

body {
    background: url(../images/mainImage.jpg) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    overflow-x: hidden;
    background-position: center center;
}

#content {
    position: absolute;
    width: 100%;
    margin: 0 auto;
    text-align: center;
    vertical-align: middle;
    top: 50%;
    transform: translateY(-50%);
}

Answer 4

已解决

div.cn {  // container
    position: absolute;
  width: 100%;
  height: 100%;
}

div.inner {  // inner div
    position: absolute;
    top: 50%; left: 50%;
}

检查一下：JSFiddle

为什么我的 div 不能水平和垂直居中？

Why can't I center my div horizontally and vertically?

html

css

center

HTML:

CSS:

试试这个 CSS:

已编辑