Centering a div on a VERY SIMPLE PAGE - css

Question

Yes. This has been asked a billion times. But nobody has given an answer that works for me.
It's so stupid. I have a SPLASH PAGE.. which has almost NO code on it. All it has is some js and a series of photos that fade in, one by one.
No matter what i do, it aligns top left of the screen. Here's the code.
<div style="height:100%; width=100%; margin: 0px auto;" id="these">
<img src="photos/splash/Y.png" height="250px" style="padding: 20px;">
<img src="photos/splash/I.png" height="250px" style="padding: 20px;">
<img src="photos/splash/K.png" height="250px" style="padding: 20px;">
<img src="photos/splash/M.png" height="250px" style="padding: 20px;">
<img src="photos/splash/U.png" height="250px" style="padding: 20px;">
<img src="photos/splash/N.png" height="250px" style="padding: 20px;">
</div>
I want it to align in the very center of any screen, regardless of resolution. ID="these" is related to the javascript that displays them and not to any css-level styles or positioning.
Ridiculously simple right?? Yeah. It's always showing up on the top left.
I don't feel it's necessary to post the js (also it's breaking my post) but if you want it, ask. It works fine. I'm a backend coder who HATES (as in detests) HTML/CSS. So you'll have to really walk me through it and not just make vague suggestions.
I even tried a table! With a valign center. That centered it but each image showed up in the center and then was pushed left as the next image faded in. Obviously not what i want.
What i want is for each image to show up, one after the other, in it's own position. But will work for any screen resolution.
I'm losing my mind.
Thanks.

Answer 1

Your example shows you centering inline elements within a block level element. So all you need to do is this:
these { text-align:center; }
Ex: http://jsfiddle.net/87zqf/
If you want to center the div within its parent, that div must have some width less than 100%. For example:
div#these {
width: 350px;
margin: 0px auto;
border: solid red 1px;
}
For example: http://jsfiddle.net/nRKYV/

Answer 2

100% height on a div will not work, which is one of the shortcomings of CSS (in my opinion).
In the end, it can only be done if you know the height of your <div>. What you want to do then is to position it absolutely, 50% off the top and left of your screen and with a margin of half its height/width.
Check out the following JSFiddle for an idea of how it can be done:
http://jsfiddle.net/Lsh6j/1/
Note that you could also use percentages for the height and width on the surrounding <div>, but for the percentage-based height to work, the <div>'s parent element's height must be set/known.

Answer 3

Using this tutorial as a guideline. First add a centered class with this css.
.centered {
position: fixed;
top: 50%;
left: 50%;
}
Add this class to your div:
<div class="centered" id="these">
...images....
</div>
The problem is this centers the top left of the div. So you need to subtract off half of the width from the margin-left and half of the height from the margin-top.
Add this javascript (uses jQuery, let me know if thats a problem) to do the adjustment
<script>
function adjust() {
var height = $("#these").height();
var width = $("#these").width();
$("#these").css("margin-top", "-" + height/2 + "px");
$("#these").css("margin-left", "-" + width/2 + "px");
}
$(window).on("resize", adjust);
adjust();
This sets the margins appropriately on a resize, as well as calls the adjust method on the initial load.

Answer 4

The simplest solution (fiddle):
html, body {
height: 100%; /* necessary to make the window height be 100% */
margin: 0;
}
body {
display: table;
width: 100%;
}
#these {
display: table-cell;
vertical-align: middle; /* for table cells, it aligns their content */
text-align: center;
}
Another option (fiddle):
html, body {
height: 100%; /* necessary to make the window height be 100% */
margin: 0;
}
#these {
text-align: center; /* images are text content */
white-space: nowrap;
}
#these:after {
content: '';
display: inline-block; /* adding invisible inline placeholder after images */
height: 100%; /* make it 100% tall */
vertical-align: middle; /* and align the whole line to its vertical center */
}
img {
vertical-align: middle; /* align vertical centers of images to the middle of the line */
}

Answer 5

Unless you have some other css that'll mess this up, just add
#these {
text-align: center;
}
to the div wrapper and toggle visibility on/off to keep them in place: http://jsfiddle.net/63cHS/