Как я могу настроить свой текст в соответствии с размерами моего экрана и исправить положение

Question

Как я могу отрегулировать мой текст в соответствии с размерами моего экрана и исправить положение.

Я хочу, чтобы мой текст был посередине, и отрегулируйте свои позиции, чтобы исправить это

Я все правильно понял получить текст посередине или есть другой способ получше? и как я могу исправить мою проблему с позицией.

Спасибо за помощь!

my HTML

<div class="text-center">

    <h2>Protein for healthy muscle and bone</h2>

    <strong>proteins in the diet contribute significantly to the production of energy for the body.</strong>

</div>

my css - bootstrap 4 + этот компонент

h2, h4, p, strong, small {
    color: oldlace;
}

div {
    position: absolute;
    top: 10%;
    margin-left: 25%;
    width: 700px;
}

Answer 1

Я изменил width: 700px на min-width: 700px и добавил width: 50% свойство к div, дайте мне знать, что вы думаете об этом решении:

body {
    background: black;
    margin-left: auto;
    margin-right: auto;
}

h2, h4, p, strong, small {
    color: oldlace;
}

div {
    position: relative;
    top: 10%;
    min-width: 700px;
    width: 50%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

<div class="text-center">

    <h2>Protein for healthy muscle and bone</h2>

    <strong>proteins in the diet contribute significantly to the production of energy for the body.</strong>

</div>

Обратите внимание, что я также изменил свойство margin на text-align: center, это более чистое решение, если вам не нужны конкретные CSS.

• Редактировать: я добавил эти свойства для body и div: margin-left: auto; и margin-right: auto;

Теперь он работает