CSS top-and-bottom padding: split evenly within fixed-height border

问题

I've been asked to put a certificate online, that users can then print out. Everything's good to go except I'm having trouble centering everything vertically.

I have on div that holds the border (#outerBorder) and another one nested inside of that which holds all the stuff (#wrapper). The #outerBorder has a fixed height, such that the certificate will have a nice even margin when printed. I'd like the #wrapper to be vertically centered inside it, so that there is even padding between the top and bottom of the #outerBorder and #wrapper.

Is there a way to do this without manually calculating and then hard-coding the numbers? The closest solution I've found is this one: Evenly distribute images vertically within fixed-height space But I'd really prefer to not use a table.

I've also tried putting "vertical-align: middle;" in the CSS for #wrapper, but that doesn't seem to do anything.

Thanks! -Kristin

回答1:

Middle align in CSS is unnecessarily elusive.

One option is adding this to your wrapper:

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

Here is a JSFiddle example

回答2:

Many CSS property not supported by the print media..

At first I can say you use media print tag and write css inside of that for print.Like - 
@media print {
   your css
}
or use external file like 
<LINK rel="stylesheet" type"text/css" href="print.css" media="print">

Now please write vertical-align: middle; inside of the print media.

Another idea may be work but it's depend of the structure of the page.That's you can use % value.Like

#outerBorder{
   height :100%;
}

#wrapper{
  height:80%;
  min-height:80%;
  margin-top:10%;
}

来源：https://stackoverflow.com/questions/16244387/css-top-and-bottom-padding-split-evenly-within-fixed-height-border

标签

css

padding