CSS/SCSS problem z valign

Question

Mój problem wygląda następująco:

Chciałem utworzyć banner z grafiką w tle a na nim tekst.
Zależy mi, aby całość była wyśrodkowana.
Wyczytałem, że aby wyśrodkować przez valign trzeba ustawić 'display:table-cell;' i tu pojawia się  problem-> całość zwęża się do szerokości tekstu. Kiedy ustawię 'display:block' to tekst wyśrodkowany jest poziomo, a pionowo już nie.
HTML:
 

 <div id='banner'><h1>Maine bannere</h1></div>

CSS (a dokładniej, SCSS):
 

#banner{
	
	width:100%;
	height:75px;
	background-image: url("../images/truesimple.jpg");
	background-size:100%;
	display:table-cell;	

}
@mixin bez-nazwy(){
	
	valign:bottom;
	text-align:center;
	width:100%;

}
h1{
	@include bez-nazwy();
}

(mixin ostatecznie będzie przeniesiony do pliku zewnętrznego, ale wstawiłem go tutaj, do czasu rozwiązania problemu. Poza tym to też, żeby sobie go poćwiczyć).

Answer 1

Sposoby środkowania

Answer 2

Daj dla diva display:table, a dla h1 display:table-cell, powinno załatwić sprawę. Aczkolwiek osobiście nie jestem fanem rozwiązań typu table i table-cell, wolę flexa :D

Answer 3

Kolego, spróbuj grid'em:

.wrapper {

display: grid;

grid-template-columns: 1fr;

grid-template-rows: 1fr;

p {

width: 60px; //   zalezna od ilosci tekstu

align-self: center;

}

}