.center { position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; }

<div class='center'></div>

I use only this two way to center any element both vertically and horizontally.

<div class="parent"> <div class="child"></div> </div>

1. Flexbox
   .parent{ display: flex; flex-direction: column; justify-content: center; align-items: center; }

2.Position

.parent{ position: relative; }

.child { position: absolute; left: 50%; margin-left: half of the total width of child; top: 50%; margin-top: half of the total height of child; }

<div class ='center-div'></div>

.center-div{
     position:absolute;
     top:0;
     bottom:0;
     left:0;
     right:0;
     width:500px;
     height:500px;
     margin:auto;
    }

Flexbox!

html

<div class="container">
    <div class="center">
        <h1>ayyeeeeee</h1>
    </div>
</div>

css

.container{
    display: flex;
    align-items: center;
    justify-content: center;
}
.center{
    padding: 10px 20px;
    background: #353535;
    text-align: center;
}
h1{
    color: #fefefe;
}

Some simple CSS styling can take care of that, no need for JS or 50%'s. Height, Width and Border added just to show you the result easier...

<div style="height:150px; width:350px; border:1px solid #ccc; display:table-cell; text-align:center; vertical-align:middle;"> Perfectly Centered Content </div>

Fiddle: https://jsfiddle.net/DblDown7671/o6upquj3/

The way of the future:

.parent {
    display: flex;
}
.child {
    margin: auto;
}

Anyone try out CSS Grids yet? How simple is that? :D

# Choose device to emulate
App.setDevice Device.iPhoneGold

# Create a new text
myText = new Text
    width: auto
    text: 'Hello'
    image: 'goo.gl/TY8mx3'
    imagePosition: center
    imageScale: 1
    backgroundClip: text
    fontSize: 120
    fontWeight: 700
    color: clear
**myText.center()**

https://magixjs.com/ (The second tutorial.)

What about this example for your query on how to horizontally and vertically center that div in javascript

Please have a look

A method (JSFiddle example)

CSS:

html, body { margin: 0; padding: 0; width: 100%; height: 100%; display: table }

#content { display: table-cell; text-align: center; vertical-align: middle; }

HTML:

<div id="content"> Content goes here </div>

I mainly use two methods for centering elements, one is the right way while the other one is a hack. Here are the two methods:

Sample markup:

<div class="wrap">
    <div class="element"></div>
</div>

1. Using Flexbox

Here is how you can center elements using flexbox:

.wrap {
    display: flex;
    justify-content: center;
    align-items: center;
}

It's just 3 lines of code and I don't think it can get any easier than this. codepen

2. Using Position

.wrap { /* nothing here */}
.element {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 156px;
}

This is a "hacky" way, you'd always have to give some width to your child element and make some adjustments here and there... codepen

Checkout my fiddle

I have six methods for vertical centering using CSS, EQCSS, and JavaScript on CodePen here: http://codepen.io/tomhodgins/pen/rLEKom

/* using calc() with 50% minus half the element's defined width and height */
.calc div {
  width: 12em;
  height: 3.5em;
  top: calc(50% - 3.5em/2);
  left: calc(50% - 12em/2);
}

/* using a negative margin equal to half the element's defined width and height */
.margin div {
  width: 12em;
  height: 3.5em;
  top: 50%;
  left: 50%;
  margin-top: -1.75em;
  margin-left: -6em;
}

/* using translate() to shift by 50% of the element's defined width and height */
.translate div {
  top: 50%;
  left: 50%;
  transform: translateX(-50%)
             translateY(-50%);
}

/* using flexbox */
.flexbox {
  display: flex;
  flex-flow: row wrap;
}
.flexbox p {
  position: absolute;
}
.flexbox div {
  position: static;
  margin: auto;
}

/* using EQCSS & scoped styles to center the element by its rendered width */
@element '.eqcss div' {
  $this {
    top: calc(50% - eval('offsetHeight/2')px);
    left: calc(50% - eval('offsetWidth/2')px);
  }
}

/* using JavaScript to center the element by its rendered width */
window.addEventListener('resize',center)
center()

function center() {
  var tag = document.querySelectorAll('.js div')
  for (var i=0; i<tag.length; i++) {
    var div = tag[i]
    div.style.top = 'calc(50% - '+(div.offsetHeight/2)+'px)'
    div.style.left = 'calc(50% - '+(div.offsetWidth/2)+'px)'
  }
}

And for horizontal centering? Nothing beats:

div {
  text-align: center;
}