我无法居中 #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;
}
最佳答案
试试这个 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%);
}
关于html - 为什么我不能水平和垂直居中我的 div？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37721946/