centering a div vertically on lap-tops

Question

How can I center my div vertically on lap-tops? (...)

body {padding: 4% 16%;}
body {top:0px; left:0px; bottom:0px; right:0px;}
body {border: 12px solid darkred; border-style: double;}
body {background-color: #FAFCB4;}
p {font-size: 80%; text-align: justify;}
@media only screen and (min-width:768px) { 
/* For desktop: */
body {position: absolute;}
body {padding: 6% 18%;}
p {font-size: 100%;}
}

<div style="margin:auto; max-width:525px;">
Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test.</div>

I'm trying to keep my codes as simple as possible, so I'd appretiate straigtforward codes. Thanks for help!

You want simple code, yet you have six `body` selectors. o_0 — isherwood, Sep 16 '15 at 17:52
You can't target specific device types with screen width. Some phones have higher resolution than some laptops, and the line between laptops and tablets is extremely nebulous. Modern responsive design doesn't attempt to do so. — isherwood, Sep 16 '15 at 17:54
possible duplicate of [How to vertically center a div for all browsers?](http://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — apaul, Sep 16 '15 at 18:05
@isherwood lol I know it looks messy but I can rearrange it... — Greg Barbo, Sep 16 '15 at 18:13

Tor Valamo · Answer 1 · 2015-09-16T18:02:12.623

1

The other guy answered your media query question, but I'd like to add something else.

There is a better way to center things than having to work out the positioning.

div.center {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%); /* Safari and iOS */
  transform: translate(-50%, -50%);
}

You're welcome.

edited Sep 16 '15 at 18:02

answered Sep 16 '15 at 17:48

Tor Valamo

33,261
11
73
81

THIS IS WONDERFUL!! That looks great, but I haven't got a clue what transform and translate is about... I'm almost thanking you :) but: Are you sure it will work in whatever laptop? – Greg Barbo Sep 16 '15 at 18:27
Bad news - your suggestion messes up my border on small devices – Greg Barbo Sep 16 '15 at 18:49
What border would that be? I thought smaller devices shouldn't have it centered anyway? Use the media queries from the other guy to have be applied only to larger devices. – Tor Valamo Sep 17 '15 at 09:18
I know, I need to use their media queries...I can't add a screenshot here, but what I mean with border is that solid red border which would (should) be almost touching the screen borders (with very little margin) in any device, at least approximately. And yes, I would like to try something different from header and nav and HTML5-mainstream. I'd like to center the content of my frontpage also vertically. Why? Because it is supposed to show only a short block with an index of works that will lead to internal links. It would look nicer if it was vertically centered, but there's no parent element. – Greg Barbo Sep 17 '15 at 20:24
Oh you just need `html, body {box-sizing: border-box;width:100%;height:100%}` then – Tor Valamo Sep 18 '15 at 09:08
Just tested it... well, IE9 opens it with a huge, huge scrolling. It looks fine with Mozilla and Chrome, but if you squeeze the window to the minimum or open the file with Smartphone, the bottom of the border stops in the middle of the text and the text continues flowing underneath the border... – Greg Barbo Sep 18 '15 at 19:05
Are you building for IE9 though? It has <0.5% use worldwide. Most likely it is used by older people who have not run windows update in years. What is your target market? – Tor Valamo Sep 18 '15 at 19:29
About the squeeze: you can again fix that by adding height to media query. – Tor Valamo Sep 18 '15 at 19:31
You mean 100% height in the div? That just drags the div to very top of the page. I'm building for Mozilla and Chrome, so I'm not worrying too much about IE9. – Greg Barbo Sep 18 '15 at 19:46

Mike Horstmann · Answer 2 · 2015-09-16T17:44:13.147

0

    body {
      padding: 4% 16%;
      margin-top: 40%;
      margin-bottom: auto;
      border: 12px double darkred;
      background-color: #FAFCB4;
    }

    p {
      font-size: 0.8em; /* You should be using "em"*/
      text-align: justify;
    }

    @media only screen and (min-width:768px) { 
    /* For desktop: */
    body {position: absolute;
      padding: 6% 18%;
    }
    p {
      font-size: 1em;
    }

    <div style="margin:auto; max-width:525px;">
    Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test. Lorem ipsum. This is a test.</div>

You should attempt to use "em" as opposed to percents for your font sizes. The user will have a font size set, and em is a value of 1, or 100% of that size. So effectively, .8 em is 80% of the user's font size. Details on "em" can be found here: (http://www.w3schools.com/cssref/css_units.asp)

Also, you can write multiple styles within one element in your css. You'll want to do that in the future as it is a more effective, and more efficient styling method in your CSS.

Lastly, I margin'd the element from the top @ 40%. This takes into assumption your element you're verically centering will be about 10-20% of the page. If it is 10%, the line:

       margin-bottom:auto;

This will set the bottom margin automatically to the remaining 50%, approximately centering the element. Add or subtract from the 40% until you're styled where you'd like vertically. If your element is 20%, you'll be perfectly centered. Cheers! Hope it helps! ;)

edited Sep 16 '15 at 17:44

answered Sep 16 '15 at 17:28

Mike Horstmann

580
2
9

For font sizes, `%` and `em` are equivalent, so it really doesn't matter which one you use. – Mr Lister Sep 16 '15 at 17:45
I think my S5 phone has a (chrome) browser resolution (width) of 968px or something. Same when it's rotated, then it just changes the height. Just FYI. – Tor Valamo Sep 16 '15 at 17:51
@MrLister (http://caniuse.com/#search=%25) Support for percentage based layouts is less than that of the support for root em. (http://caniuse.com/#feat=rem) Including IE, "EDGE," and earlier Android browsers, as well as a total lack of support in Opera Mini. I'm not sure if you work professionally in the field, but a lot of companies still rely on IE. – Mike Horstmann Sep 16 '15 at 18:00
@MikeHorstmann will this look vertically centered in whatever device (laptop)? – Greg Barbo Sep 16 '15 at 18:16
@MikeHorstmann I wasn't talking about `rem`. It's just that you said for fonts, `em` was better than `%`, and I said they were equivalent. That's all. – Mr Lister Sep 16 '15 at 19:31
@GregBarbo for the most part yes, but you're also grossly over simplifying "on a laptop" for instance I'm on a Macbook Pro Retina right now, the resolution on this, defines that the pixel count is a certain height and width count different than others. While that layout will be presented @ 40% below the top edge of the browser view, it doesn't necessarily define that the element will take up 20% of the screen's resolution based pixels. Whereas, on my Windows 8.1 or Win10 laptops the res. is much lower so perhaps that would be fine looking on there. – Mike Horstmann Sep 16 '15 at 21:58
But vertically, your div element will always BEGIN 40% below the top of the previous elem. To do this more accurately, you would probably want to provide more of your actual HTML. Additionally, you can use javascript on page load to calculate 1 - the screen height, 2 - the element height, 3 - absolute center of the topmost element(screen, or "window" in the DOM) and then subtract half of the element height from the screen height making the center line of the element perfect center. What I gave you was more of a 'winging it with very little example code' but, it should work out fine for you – Mike Horstmann Sep 16 '15 at 22:02

Roemerdt · Answer 3 · 2015-09-16T17:53:45.780

0

You can use Flexbox in CSS3 like this.

// To make sure body has the full viewport width and height
html {
    height: 100%;
    width: 100%;
}
// Styles for the div container. In this case it's the body, which is not good practice
body {
    height: 100%;
    width: 100%;
    // Make the container a Flexbox
    display: -webkit-flex;
    display: flex;
    // Align horizontal
    justify-content: center;
    // Align vertical
    -webkit-align-items: center;
    align-items: center;
}

And if you really only want it for laptops you need to wrap the css rules inside:

// Non-Retina Screens
@media screen
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 1) { 
}

// Retina Screens
@media screen 
    and (min-device-width: 1200px) 
    and (max-device-width: 1600px) 
    and (-webkit-min-device-pixel-ratio: 2)
    and (min-resolution: 192dpi) { 
}

edited Sep 16 '15 at 17:53

answered Sep 16 '15 at 17:46

Roemerdt

147
4
14

That looks clean but quite lenghty, the other guy suggested a div.center and that worked. – Greg Barbo Sep 16 '15 at 18:32
"Styles for the div container. In this case it's the body, which is not good practice". What would be good practice? – Greg Barbo Sep 16 '15 at 18:33
Using a div as a container – Roemerdt Sep 16 '15 at 18:36
Great, it works! I left out two things: 1) "body height and width" (because it made the area huge and I don't want people to scroll on laptops); 2) "align-horizontal" (because my div has already {margin:auto}). – Greg Barbo Sep 16 '15 at 19:02
It doesn't work with IE though, but other browsers seem ok with it! – Greg Barbo Sep 16 '15 at 19:09
Yes it does only work on version 11 of Internet Explorer, so I wouldn't use this technique on large sites just yet. – Roemerdt Sep 16 '15 at 19:17
To be fair, I don't think this is what flexbox is intended for. – Tor Valamo Sep 17 '15 at 09:24

score 0 · Answer 4 · answered Sep 16 '15 at 18:01

0

Everyone's already discussed Media Query limitations to target laptops.

For the vertical alignment, another option uses CSS display properties of table and table-cell, and vertical-align to center anything without knowing the container's height.

CSS-Tricks has an article on it.

answered Sep 16 '15 at 18:01

josh1978

698
7
19

I need my div to be vertically in the middle of whatever device. – Greg Barbo Sep 16 '15 at 18:14
The above will work? Did you try it? I can create a codepen, but I thought the article link would be better at explaining the concept. – josh1978 Sep 16 '15 at 18:17
The article looks a bit above my level... I thought vertical align would work more easily... – Greg Barbo Sep 16 '15 at 18:36

centering a div vertically on lap-tops

4 Answers4