How can my title be centered without "padding-cheat"? - html

Question

How can I center my h1 tag into the middle of my banner without setting a padding?
HTML
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
CSS
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
}
Can you do something with vertical-align: middle; and display: table-cell; etc?

Answer 1

There's several options, I recommend looking through this - https://css-tricks.com/centering-css-complete-guide/
One option would be: http://jsfiddle.net/dtq7fed3/ which uses a line-height on the container that is the same of the height of the banner.
.banner {
height: 500px;
width: 100%;
background-color: #000;
}
.bannerContainer {
text-align: center;
line-height: 500px;
color: #fff;
}
This only works if the banner height is going to remain stagnant

Answer 2

Using transform, you can position in centrally like so: http://jsfiddle.net/otghf6zo/1/
adding this code will position the title in the exact middle of the containing div regardless of size.
h1 {
color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}

Answer 3

You can use CSS table like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: table;
text-align: center;
color: white;
}
.bannerContainer {
display: table-cell;
vertical-align: middle;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>
Or Flexbox like this
.banner {
height: 500px;
width: 100%;
background-color: #000;
display: flex;
color: white;
align-items: center;
justify-content: center;
}
<div class="banner">
<div class="bannerContainer">
<h1>Group Title</h1>
</div>
</div>