CODEWITHSUNDEEP
htmlcsscenter
Cactuses
Cactuses

Reputation: 79

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

Upvotes: 0

Views: 77

Answers (4)

Roysh
Roysh

Reputation: 1550

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

Upvotes: 1

Jijo Lopez
Jijo Lopez

Reputation: 36

Edited

Try out this code:

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

Upvotes: 0

Falguni Panchal
Falguni Panchal

Reputation: 8981

Try this code:

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

Check out these demos:

Demo 1

Demo 2

Upvotes: 1

Rohit Goyani
Rohit Goyani

Reputation: 1256

Solved

div.cn {  // container
    position: absolute;
  width: 100%;
  height: 100%;
}

div.inner {  // inner div
    position: absolute;
    top: 50%; left: 50%;
}

check it : JSFiddle

Upvotes: 1

Related Questions