Cactuses Cactuses - 5 months ago 7
HTML Question

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

I can't manage to center

#content
to the middle of the page, I feel like I've tried everything.

I think I might not be directing my CSS to the right
div id
, but I so far have only managed to get the
<a>
tags to be centered right at the top of the page. I've searched online and found that a common way to solve this issue would be to add:

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


But so far have had no luck. Help would be greatly appreciated!





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

Try this 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%;
  margin: 0 auto;
  text-align: center;
  vertical-align: middle;
  top: 50%;
  transform: translateY(-50%);
}
Comments