[英]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%);
}
為什么我不能在這個 div 中使用彈性框來水平和垂直居中？
[英]Why can't I use flex box in this div to center it both horizontally and vertically?
如何在div內水平和垂直居中放置圖像和文本？
[英]How can I center an image and text horizontally and vertically inside a div?
如何將div的內容在其中垂直或水平居中？
[英]How can I center contents of a div vertically and horizontally inside of it?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.