Horizontally and Vertically Centering Text - html

Question

I want to vertically and horizontally centre some text in a div that contains to images beside it. So far I've only got it horizontally centred and am having troubling getting it vertically centred. I know there a lots of posts like this and mentioning some absolute positioning but every time I try it everything just overlaps.
Heres the jsfiddle: https://jsfiddle.net/kkae9rzy/
If you expand the result screen horizontally so that everything is on the same line(baseline) you will see that the text is not vertically centred.
Heres the code for my css:
#titleheader{
margin:auto;
text-align: center;
padding:100px;
background:#f2f2f2;
}
#titleheader > h1 {
padding-left: 75px;
padding-right: 75px;
display:inline-block;
font-family: "Bariol_Regular", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #555;
letter-spacing: 3px;
font-size: 50px;
}
#wind{
display:inline-block;
}
#intel{
display:inline-block;
}

Answer 1

I didn't see that anything is "vertically centered" in your version, but I added a vertical-align: middle to the <img> tags (via css) and it looks like that's what you wanted. See the fiddle.

Answer 2

You can use the flexbox layout to achieve this, as well as a few other methods.
Here is the fiddle with the modifications to your CSS to utilize the flexbox method. Pay special attention to #titleheader. https://jsfiddle.net/kkae9rzy/2/
You'll see that I added a few flexbox rules to #titleheader:
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
display: flex; tells #titleheader to use the flexbox display layout.
(See http://dev.w3.org/csswg/css-flexbox/ and https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for more info on flexbox)
align-items: center; is telling #titleheader to align all of its children to the center of the cross axis (for our demo, the X axis, so it's vertically centering them).
justify-content: center is telling #titleheader to align all of its children to the center of the main axis (for our demo, the Y axis, so it's horizontally centering them).
flex-wrap: wrap is telling #titleheader to wrap child elements onto a new line instead of forcing them to be all on the same line, regardless of how much screen space is available.
Flexbox is an extremely powerful tool. It's rapidly gaining in browser support and I suspect we will be able to start using it without too many polyfills soon.
Here is the current support for flexbox: http://caniuse.com/#feat=flexbox
To ensure the widest variety of support when using flexbox, make sure you include all vendor prefixed versions of the flexbox declarations I mentioned above. This can be achieved using a tool like autoprefixer (https://github.com/postcss/autoprefixer) which adds all the necessary vendor prefixes to your CSS when compiled.
Including all of the vendor prefixes for the attributes I mentioned above would look something like this:
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

Answer 3

This should work
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);