Метод 1: использование CSS Flexbox

<style>
  .container {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
    width: 300px;
    height: 200px;
  }
</style>
<div class="container">
  <p>Content goes here</p>
</div>

В этом методе мы создаем элемент-контейнер и применяем к нему display: flex. Свойство justify-content: centerцентрирует контент по горизонтали, а align-items: center— по вертикали. Граница применяется к элементу контейнера.

Метод 2: использование CSS Grid

<style>
  .container {
    display: grid;
    place-items: center;
    border: 1px solid black;
    width: 300px;
    height: 200px;
  }
</style>
<div class="container">
  <p>Content goes here</p>
</div>

В CSS Grid мы используем свойство display: gridэлемента контейнера. Свойство place-items: centerцентрирует контент как по горизонтали, так и по вертикали.

Метод 3. Использование абсолютного позиционирования

<style>
  .container {
    position: relative;
    width: 300px;
    height: 200px;
    border: 1px solid black;
  }

  .content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
</style>
<div class="container">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>

В этом методе мы устанавливаем относительную позицию элемента контейнера. Внутри контейнера мы создаем элемент контента и применяем к нему position: absolute. top: 50%и left: 50%точно настраивают его.

Метод 4. Использование выравнивания текста

<style>
  .container {
    text-align: center;
    border: 1px solid black;
    width: 300px;
    height: 200px;
  }
</style>
<div class="container">
  <p>Content goes here</p>
</div>

В этом методе мы устанавливаем свойство text-align: centerдля элемента контейнера. Он центрирует текстовое содержимое по горизонтали.

Метод 5. Использование JavaScript

<style>
  .container {
    border: 1px solid black;
    width: 300px;
    height: 200px;
  }
</style>
<div class="container" id="myContainer">
  <p>Content goes here</p>
</div>
<script>
  const container = document.getElementById('myContainer');
  container.style.display = 'flex';
  container.style.justifyContent = 'center';
  container.style.alignItems = 'center';
</script>

В этом методе мы используем JavaScript для динамического управления стилями элемента контейнера. Мы выбираем элемент контейнера, используя его идентификатор, а затем применяем нужные свойства CSS, используя свойство style.