TheRealPapa TheRealPapa - 3 months ago 8
CSS Question

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

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

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