Center a circular div in the middle (vertical / horizontal) of a page

Question

I am trying to pop up a tick (success) or cross (error) circular div on my pages as the result of a page post. I am close, but cannot quite get it centered.

My HTML is added by JS upon page load, and shown for 1 second:

// Circle button alert popup
function popupNotification(type) {

    if (type == 'success') {
        var popupButton = '<button type="button" id="popup-button" class="btn btn-success btn-circle btn-xl"><i class="glyphicon glyphicon-ok"></i></button>';
    } else if (type == 'warning') {
        var popupButton = '<button type="button" id="popup-button" class="btn btn-warning btn-circle btn-xl"><i class="glyphicon glyphicon-warning-sign"></i></button>';
    } else {
        var popupButton = '<button type="button" id="popup-button" class="btn btn-danger btn-circle btn-xl"><i class="glyphicon glyphicon-remove"></i></button>';
    }

    $('body').append(popupButton);
    $('#popup-button').fadeIn('fast');
    $("#popup-button").fadeTo(1000, 500).fadeOut(500, function(){
        $("#popup-button").fadeOut(500);
        $("#popup-button").remove();
    });

}

My CSS is:

#popup-button {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  opacity: 0.7;
  cursor: wait;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

This code centers the circular div with icon, but it is just off by half its width and half its height. I have tried the following without success:

#popup-button {
  position: fixed;
  z-index: 9999;
  top: 50% - 35px;
  left: 50% - 35px;
  opacity: 0.7;
  cursor: wait;
}

Any ideas are highly appreciated!

Answer 1

You are very close to the correct answer. Add the negative numbers to the margin property:

#popup-button {
  position: absolute;
  z-index: 9999;
  top: 50%;
  left: 50%;
  opacity: 0.7;
  cursor: wait;
  margin-left: -35px;
  margin-top: -35px;
}

Answer 2

You can manipulate with negative margin. This solution is cross-browser and is used often, but it is kind of "hacky":

#popup-button {
  position: fixed;
  z-index: 9999;
  top: 50%;
  left: 50%;
  margin-left: -35px;
  margin-top: -35px;
  opacity: 0.7;
  cursor: wait;
}

Also, you can use CSS3 calc() function. It is a better approach, but it is not supported by all browsers ( calc() browser support ):

#popup-button {
  position: fixed;
  z-index: 9999;
  top: calc(50% - 35px);
  left: calc(50% - 35px);
  opacity: 0.7;
  cursor: wait;
}

One more thing I need to mention.
You can center anything in a container using display: flex with align-items and justify-content CSS3 properties ( flex browser suppport ). Note that it affects the arrangment and behavior of all child elements.

 html, body { height: 100%; width: 100%; margin: 0; padding: 0; } .full-page-container { display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; } button { height: 64px; width: 64px; border: 3px solid gray; border-radius: 50%; } 

 <div class="full-page-container"> <button>Hello World!</button> </div> 

Answer 3

I think it can be done without negative margins:

.centered {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

Example:

 .centered { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: red; width: 10px; height: 10px; } 

 <div class="centered"> </div> 

Answer 4

Maybe it would work with window height and width properties? Try top: 100vh - 35px

Answer 5

I agree with Adrian's answer. Using CSS3:

transform: translate(-50%, -50%);

Along with:

top: 50%;
left: 50%;

Is a better solution as it's responsive, no matter the height or width of the parent you won't have to recalculate like some of the other solutions.

Also don't forget to vendor prefix transform for various older versions of browsers, If you're using SASS I'd recommend this handy little mixin by CSS Tricks.