[英]Why can't I use flex box in this div to center it both horizontally and vertically?
[英]Why can't I center my div horizontally and vertically?
我无法将#content
居中到页面的中间,我觉得我已经尝试了一切。
我想我可能没有将CSS指向正确的div id
,但是到目前为止,我只设法将<a>
标记居中在页面顶部。 我在网上搜索过,发现解决此问题的常用方法是添加:
position: absolute;
width: 100%;
height: 100%;
margin: 0 auto;
top: 0;
left: 0;
right: 0;
bottom: 0;
但是到目前为止还没有运气。 帮助将不胜感激!
<!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>
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
.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;
}
查看这些演示:
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%);
}
解决了
div.cn { // container
position: absolute;
width: 100%;
height: 100%;
}
div.inner { // inner div
position: absolute;
top: 50%; left: 50%;
}
检查它: JSFiddle
试用以下代码:
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%);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.