Vertical align center of body

Question

My purpose is to print the contents vertically while printing a file. But before I do this, I will write the following "html, body" tags to download the page to 1, I applied the following question-and-answer styles. Then, when I simply say "margin: 50% auto", this function does not work the way I want it to. When I try to change the content of the "html, body" tag, the number of pages can be 2,3 instead of 1. I thank you for your help.

Note: I'm try to center of body this element =>"#containerDiv"

JSFiddle

html,
body {
  width: 210mm;
  height: 50mm;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  border: 1px solid black;
  display: table;
}

#containerDiv {
  margin: 50% auto;
}

<div style="background:blue" id="containerDiv">
  <div style="background:red; height:200px;width:200px;" id="innerDiv"></div>
</div>

What exactly are you trying to center, the container or the red div? — , Dec 26 '17 at 07:21
Can you draw a diagram as to what kind of layout you're referring to in paint or something? It's not clear. — , Dec 26 '17 at 07:26
@BhuwanBhatt Because i'm try to print page. Its like a4 format. 210mm and 297mm. I've entered the length a bit smaller so you can see it more easily. — Muhammet Can TONBUL, Dec 26 '17 at 07:39
Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — Temani Afif, Dec 26 '17 at 07:52
@TemaniAfif your duplicate url answer same of Shekhar Singh's answer. But its not working. — Muhammet Can TONBUL, Dec 26 '17 at 07:55
it's not the only duplicates, i can provide you at least 3 more ... and are you sure you read all the answers and comments ? not only the accpeted one — Temani Afif, Dec 26 '17 at 07:56
@TemaniAfif I think my question is different. I suggest you look at html,body css. And i tried so much, but not working any case. — Muhammet Can TONBUL, Dec 26 '17 at 07:58
https://stackoverflow.com/questions/114543/how-to-horizontally-center-a-div-in-another-div .... https://stackoverflow.com/questions/1776915/how-to-center-absolutely-positioned-element-in-div ...https://stackoverflow.com/questions/618097/how-do-you-easily-horizontally-center-a-div-using-css — Temani Afif, Dec 26 '17 at 07:58
yes i always read question carefully before vote to close ;) and i don't understand why you want to apply this particular style to limit the page to only one .. you can simply use max-height/max-width on html/body and use any classic way to center your div — Temani Afif, Dec 26 '17 at 08:07
https://stackoverflow.com/questions/19798923/printing-text-in-html-in-the-center-of-the-page ... https://css-tricks.com/centering-in-the-unknown/ ..maybe this will help too — Temani Afif, Dec 26 '17 at 08:21

score -2 · Answer 1 · edited Jan 09 '18 at 18:19

-2

Add property display: table; to

html, body {
    width: 210mm;
    height: 50mm;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden;
    border:1px solid black;
}

And add

display: table-cell;
vertical-align: middle;

into

#containerDiv{
    margin:10% auto;
}

edited Jan 09 '18 at 18:19

Bhuwan

16,525
5
34
57

answered Dec 26 '17 at 07:27

Shekhar Singh

35
3

Provide a working snippet, rather than just raw code. – Dec 26 '17 at 07:28
This code aligned center but inner div, not containerDiv. @ShekharSingh – Muhammet Can TONBUL Dec 26 '17 at 07:38

Vertical align center of body

1 Answers1