htmlcsscenter

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:

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

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;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

```
<!-- 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">

<!-- Bootstrap css -->
<link rel="stylesheet" href="css/bootstrap.min.css">

<!-- Custom css -->
<link rel="stylesheet" type="text/css" href="css/style.css">


<!-- JS -->
<script src="js/bootstrap.min.js"></script>





<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>

Solution

  • 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;
}

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