How do I center a div along the y axis?

Question

I want to center my div element with classes block and text-center not only horizontally but vertically as well. I tried adding a margin-top to it but this ends up separating its parent element #home from the ul above it. You need to sub in any jpeg for my background image of #home (bolded below in my css) to see what I mean. I want the full image to be in display with the top of it touching the ul as it is right now, but I also want to move the div inside of #home downward without changing its size. How can I do this? Also please note I am using bootstrap css template, hence the class names.

HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"/>
 <link rel="stylesheet" type="text/css" media="all" href="css/animate.min.css"/>
 <link rel="stylesheet" type="text/css" href="css/porfolioPage.css"/>
 <link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"/>

 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
 <style>
 </style>
</head>
<body>
  <div class="container-fluid">
    <ul id="contents" class="nav nav-pills">
      <li>
        <a href="#" id="productions">In Production</a>
      </li>

      <li class="pull-right">
         <a href='#'>Contact</a>
      </li>
      <li class="pull-right">
        <a href='#'>Portfolio</a>
      </li>

      <li class="pull-right">
        <a href='#'>About</a>
      </li>
      <li class="pull-right">
         <a href='#'>Home</a>
      </li>
    </ul>

  <div id="home">
    <div class="block text-center">
      <h1 class="homeHeading">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading">Developing</h3>
    <div class="btnList">
      <a class="btn btn-primary" href="#">Twitter</a>
      <a class="btn btn-primary" href="#">Facebook</a>
      <a class="btn btn-primary" href="#">Linkedin</a>
      <a class="btn btn-primary" href="#">Github</a>
    </div>
   </div>
  </div>
  </div>
</body>
</html>

CSS:

body{
    font-family: "avenir";
    font-weight:500;
}
.nav-pills{
    font-family:arial;
    font-size:2.0em;
    background-color:black;
}
#productions{
    font-family:Lobster;
}
#home{
    **background-image:url(snoopAndZuck.jpg);**
    background-size:cover;
    height:800px;
}

.btn-primary{
    font-size:1.7em;
}
h1{
    font-size: 4em;
}
.homeHeading{
    margin:0 0 0 0;
    padding:0px;

}
.block{
    opacity:.7;
    background-color: #000000;
    padding:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
    }

Can you please share a working link somewhere or a jsfiddle? — abhinsit, Jan 31 '16 at 05:29
Possible duplicate of [How to center an element horizontally and vertically?](http://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically) — TylerH, Jan 31 '16 at 06:21

score 1 · Accepted Answer · answered Jan 31 '16 at 12:58

Check this out:

http://codepen.io/xvariant/pen/mVKjzx

body {
  font-family: "avenir";
  font-weight: 500;
}
.nav-pills {
  font-family: arial;
  font-size: 2.0em;
  background-color: black;
}
#productions {
  font-family: Lobster;
}
#home {
  background: red;
  height: 800px;
}
.btn-primary {
  font-size: 1.7em;
}
h1 {
  font-size: 4em;
}
.homeHeading {
  margin: 0 0 0 0;
  padding: 0px;
}
.block {
  opacity: .7;
  background-color: #000000;
  padding: 10px;
  width: 85%;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid">
  <ul id="contents" class="nav nav-pills">
    <li>
      <a href="#" id="productions">In Production</a>
    </li>

    <li class="pull-right">
      <a href='#'>Contact</a>
    </li>
    <li class="pull-right">
      <a href='#'>Portfolio</a>
    </li>

    <li class="pull-right">
      <a href='#'>About</a>
    </li>
    <li class="pull-right">
      <a href='#'>Home</a>
    </li>
  </ul>

  <div id="home">
    <div class="block text-center">
      <h1 class="homeHeading">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading">Developing</h3>
      <div class="btnList">
        <a class="btn btn-primary" href="#">Twitter</a>
        <a class="btn btn-primary" href="#">Facebook</a>
        <a class="btn btn-primary" href="#">Linkedin</a>
        <a class="btn btn-primary" href="#">Github</a>
      </div>
    </div>
  </div>
</div>

You need top specify the distance from top of parent div. Then move the child div upwards by half of it's own height.

score 0 · Answer 2 · answered Jan 31 '16 at 05:32

0

Without looking at your code, I like to center divs vertically by using calc.

div {
    width:200px;
    height:200px;
    top:calc(50% - 100px); /* 100px is half the height..*/
    position:absolute;
    background:red;
}

https://jsfiddle.net/foreyez/rLwsv019/

answered Jan 31 '16 at 05:32

Shai UI

50,568
73
204
309

Absolute won't work for me because it knocks the text within the div out of alignment :(. Thanks for the try though! – Ha_Riddler Jan 31 '16 at 06:14

score 0 · Answer 3 · answered Jan 31 '16 at 07:56

I have put a space with CSS style "padding: 25px" before the start of "block" class.

https://jsfiddle.net/sadika/y8h1eLrq/

Let me know if that would help you or I can help you do the things you want.

CSS:

<style>
body{
    font-family: "avenir";
    font-weight:500;
      margin:0px;
      padding:0px;
}
.nav-pills{
    font-family:arial;
    font-size:2.0em;
    background-color:black;
}
#productions{
    font-family:Lobster;
}
#home{
    /*background-image:url(snoopAndZuck.jpg);*/
    background-image: url(http://lorempixel.com/1600/400/nature/); 
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    height:800px;
}
.btn-primary{
    font-size:1.7em;
}
h1{
    font-size: 4em;
}
.homeHeading{
    margin:0 0 0 0;
    padding:0px;
}
.block{
    opacity:.7;
    background-color: #000000;
    padding:10px;
    width:85%;
    margin-left:auto;
    margin-right:auto;
}

@media (max-width: 578px) {
    .btnList a {
        margin: 2px 0px;
    }
}
</style>

HTML:

<body>
<div class="container-fluid" style="padding: 0px; margin: 0px;">
    <ul id="contents" class="nav nav-pills">
      <li>
        <a href="#" id="productions">In Production</a>
      </li>

      <li class="pull-right">
         <a href='#'>Contact</a>
      </li>
      <li class="pull-right">
        <a href='#'>Portfolio</a>
      </li>

      <li class="pull-right">
        <a href='#'>About</a>
      </li>
      <li class="pull-right">
         <a href='#'>Home</a>
      </li>
    </ul>

  <div id="home">
    <div style="padding:25px;"></div>
    <div class="block text-center">
      <h1 class="homeHeading" style="color:white;">Sandoval Labs Incorporated</h1>
      <h3 id="homeHeading" style="color:white;">Developing</h3>
    <div class="btnList">
      <a class="btn btn-primary" href="#">Twitter</a>
      <a class="btn btn-primary" href="#">Facebook</a>
      <a class="btn btn-primary" href="#">Linkedin</a>
      <a class="btn btn-primary" href="#">Github</a>
    </div>
    </div>
  </div>
  </div>
  <body>

score -1 · Answer 4 · answered Jan 31 '16 at 05:35

-1

Try adding to the CSS part:

line-height: XXXpx; (or XXX%)

It works on text but it might work on a div as well I never tried that... But I wish you luck :)

answered Jan 31 '16 at 05:35

Mind Rapist

19
3

How do I center a div along the y axis?

4 Answers4