0

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

FIDDLE

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%;
}
Ankush Raghuvanshi
  • 1,204
  • 10
  • 17
0x3C
  • 5
  • 4

4 Answers4

1
body{
    overflow: hidden;
}

Vertical only:

body{
    overflow-y: hidden;
}

Horizontal only:

body{
    overflow-x: hidden;
}

Possible duplicate: Hiding the scrollbar on an HTML page

Community
  • 1
  • 1
Hodrobond
  • 1,545
  • 13
  • 17
  • It does remove the scroll bar, but it also messes with my vertical centering if I use vertical only. I didn't check overall overflow, so that might have worked. Preliminary tests say that Kamil Zajac has the correct response. Will update later and test again with the full overflow. – 0x3C Jul 25 '16 at 22:45
0
html,
body {
  position: fixed;
  top:00;
  left:0;
  bottom:0;
  right:0;
}

Here is your updated demo

Ashkan Mobayen Khiabani
  • 30,915
  • 26
  • 90
  • 147
0

Setting overflow to hidden may solve the scrollbar not appear but in that case it may not be fully vertically centered.

Instead you can not set padding on all elements, like you do with

* {
  margin: 0;
  padding: 10px;
}

It makes your body element and .content-wrapper to have extra padding of 10px that adds to its height and makes the scrollbar appear, if you set this padding to 0 the scrollbar disapears, check on your fiddle.

So for your example you could set your css like

body, html {
  margin: 0;
  padding: 0;
}

p, h1, h2, h3, h4, span, br, hr {
  margin: 0px;
  padding: 10px;
} 

html,
body {
  height: 100%;
  margin: 0;
}

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

/*
Button
*/

.btn {
  -webkit-border-radius: 8;
  -moz-border-radius: 8;
  border-radius: 8px;
  font-family: Arial;
  color: black;
  font-size: 18px;
  background: #ccc;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
  outline: none;
}

.btn:hover {
  background: #bbb;
  text-decoration: none;
  }

In that case scrollbar won't appear.

Instead of setting margins and paddings on all elements with * use something like css style reset. Google for it. Then apply padding only on those elements you really need.

Kamil Zajac
  • 223
  • 1
  • 4
  • I'll examine this more thoroughly when I get home from class, but it works in the jsfiddle demo! I just copied the stylesheet from a previous stackoverflow answer that I had seen, so I wasn't paying complete attention. I'll comment again later tonight. Thank you. – 0x3C Jul 25 '16 at 22:44
  • I looked at the `overflow` comments and this one, and yours was the actual solution. So it wasn't a matter of hiding the scroll bar, it was a CSS issue with how I had everything styled. Thank you for showing me what was wrong! – 0x3C Jul 26 '16 at 17:00
0

set overflow to hidden; this may solve it.

andy
  • 65
  • 10