Я не могу понять, как разместить слова для каждого элемента div в середине каждой стороны, используя CSS и HTML

Question

Как и в названии, я пытаюсь создать грубый макет для веб-сайта, и я хочу не только центрировать слова на каждой стороне, как они уже есть, но и располагать их посередине. Когда я использую преобразование и помещаю слова в середину страницы, элемент h1 не перемещается, но затем элемент p продолжает перемещаться по странице, а не корректировать его с каждой новой строкой. Любые советы?

    <div class="left-side" >
        <h1>Welcome.</h1>
            <p>I want to welcome you!</p>
    </div>
    <div class="right-side">
        <h1>Corey Michaud.</h1>
            <p>Corey is my name :)</p>
    </div>

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
}

body {
    text-align: center;
    overflow: hidden;
    font-family: 'Rubik', sans-serif;
}

.left-side {
    background: white;
    width: 50%;
    height: 100%;
    left: 0;
    color: black;
    position: absolute;
}

.right-side {
    background: black;
    width: 50%;
    height: 100%;
    right: 0;
    color: white;
    position: absolute;
}

h1 {
    font-size: 72px;
    font-weight: 700;
}

p {
    font-size: 48px;
    font-weight: 300;
}

Answer 1

Вы хотите использовать css flexbox. Добавить

.left-side, .right-side{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}

Надеюсь, это полезно!