Как выровнять заголовок по центру контейнера?

Question

[Leha Lepeha]

spoiler

Прошу прощения за, возможно, кривой БЭМ

Как сделать заголовок по середине?
Вот html

<header class="header">
			<div class="container">
				<div class="header-top">
					<div class="header-top__left">
						<div class="logo"><img src="images/ZET.png" alt="" class="logo-pic"></div>
					</div>
					<div class="header-top__right">
						<button id="mmenu-icon" class="hamburger hamburger--collapse" type="button">
  							<span class="hamburger-box">
    							<span class="hamburger-inner"></span>
  							</span>
						</button>
						<nav id="menu" class="nav">
							<ul class="nav__list">
								<li class="nav__item">
									<a href="" class="nav__link">Home</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Services</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Works</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Clients</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Team</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Companies</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Price</a>
								</li>
								<li class="nav__item">
									<a href="" class="nav__link">Contact Us</a>
								</li>
							</ul>
						</nav>
					</div>
					<div class="header__tittle">
						<div class="header__tittle-top">
							<h1 class="header__tittle-top header-txt">Something Nothing</h1>
						</div>
						<div class="header__tittle-middle">
							<p class="header__tittle-middle header-txt">Enean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend<br>ac, enim iam ultricies nisi eleifend tellus.</p>
						</div>
						<div class="header__tittle-bottom">
							<a href="" class="header__tittle-bottom-btn section__tittle-btn header-txt">LET'S TALK</a>
						</div>
					</div>
					<div class="header-bottom__arrow"><a href="" class="header-bottom__arrow-btn"><i class="fas fa-angle-down"></i></a></div>
				</div>
			</div>
		</header>

Вот css, но он выравнивает только по ширине, по длине не хочет

.header {
	display: flex;
	display: -webkit-box;
  	display: -ms-flexbox;
	background-image: url('/images/bg-header.png');
	min-height: rem(700px);
	height: 100vh;
	background-size: cover;
	background-position: center;
	&__tittle {
		justify-content: center;
		text-align: center;
		margin: 0 auto;
		position: relative;
		max-width: 625px;
		&-top {
			font-family: 'Montserrat';
			font-size: rem(36px);
			font-weight: 700;
		}
		&-middle {
			font-family: "Open Sans";
			font-size: rem(17px);
			letter-spacing: -0.42px;
		}
	}
	&-txt {
		color: $font-head-style;
	}

	&-top__left {
		padding-top: rem(40px);
		justify-content: flex-start;
	}

	&-top__right {
		justify-content: flex-end;
		float: right;
	}
}

.hamburger-inner, .hamburger-inner:before, .hamburger-inner:after {
	background-color: #fff !important;
}

Answer 1

[Eugene Chefranov]

&__tittle {
    justify-content: center;
    align-items: center;
    text-align: center;
    margin: 0 auto;
    position: relative;
    max-width: 625px;
}

Comments

[Leha Lepeha]

Не хочет выравниваться, также держится сверху по середине

[Eugene Chefranov]

Leha Lepeha, высоту еще задайте

[Leha Lepeha]

Задал для tittle высоту 194px и ничего не изменилось

[Вадим Кот]

Eugene Chefranov, justify-content и align-items без display flex бессмысленны.

[Leha Lepeha]

Вадим Кот, я ведь дал display flex для header

[Leha Lepeha]

Вадим Кот, когда дал tittle disp flex, то все заработало, но теперь элементы в строчку распологается, как это исправить?

[Вадим Кот]

Leha Lepeha, Ну раз используете flex, то должны знать и про flex-direction
Выравнивание элементов в Flex контейнере (MDN)

[Leha Lepeha]

Вадим Кот, flex direcrion:column, все понял. Спасибо вам большое

Answer 2

[Sinnk]

Как вариант:

&__tittle {
     margin-left: 50%;
     transform: translate(-50%, 0);
}

Answer 3

[lukoie]

Для этого в бутстрапе4 есть классы
align-self-center
d-flex align-items-center