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

<强>解决

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

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

检查： JSFiddle

Answer 4

被修改

试试这段代码：

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%);
}

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

HTML：

CSS：

4 个答案:

试试这个CSS：

被修改