Working on a webpage that has one "div" which is aligned as center. I went through a bunch of methods to try and get it working the way that I want it to, and finally found the closest one. I have a working demo over here
My only problem with it right now is that even when the content doesn't take up the whole content of the page, it still adds a scroll bar. I'm wondering if there's anyway to remove that? I believe it has to do with the jQuery method of centering the "div".
Javascript:
$(function() {
jQuery.fn.center = function() {
this.css("position", "fixed");
this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
return this;
}
$('#myDiv').center();
$(window).resize(function() {
$('#myDiv').center();
});
});
CSS
* {
margin: 0;
padding: 10px;
}
html,
body {
height: 100%;
}
body {
font-family: 'Josefin Sans';
text-align: center;
}
p {
font-size: 18px;
margin: 0 0 0.5em;
}
.centered-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 100%;
}
.centered {
background: #ccc;
border-radius: 8px;
margin: 0 auto;
padding: 20px;
width: 85%;
}