Выравнять блок по центру JS

Question

Мне нужно выравнивать блок по центру смотря на ширину клиентского окна:

var width;
var center = document.querySelector('.center');
width = document.documentElement.clientWidth;
var ml = (width - center) / 2;
center.style.marginLeft = ml + 'px';

<div class="center">
  <h1>Мы создаем легкие решения сложных задач и проблем</h1>
</div>

Ошибка в консоли: у свойства style значение null.

Answer 1

По сути все работает, но зачем js ? такие вещи нужно делать на css

const center = document.querySelector('.center');
const width = document.documentElement.clientWidth;
const ml = (width - center.offsetWidth) / 2;

center.style.marginLeft = ml + 'px';

.center {
  max-width: 200px;
}

<div class="center">
  <h1>Мы создаем легкие решения сложных задач и проблем</h1>
</div>

CSS

body {
  min-height: 100vh;
  min-width: 100vw;
  margin: 0;
  padding: 0;
}
.center {
  padding: 1rem;
  max-width: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: skyblue;
}

<div class="center">
  Мы создаем легкие решения сложных задач и проблем
</div>

Answer 2

Формула достаточно простая, но имейте ввиду что "визальный центр" может чуть отличаться из за переносов строки.

С использованием JS:

const h1 = document.querySelector("h1")
const h1Width = h1.clientWidth
const bodyWidth = document.body.clientWidth
const ml = (bodyWidth - h1Width) / 2
h1.style.marginLeft = ml + "px"

h1 {
  max-width: 80vw;
  border: 1px solid red;
  margin: 0;
}

<h1>Мы создаем легкие решения сложных задач</h1>

Только с помощью CSS:

body {
  display: flex;
  justify-content: center;
}

h1 {
  max-width: 80vw;
  border: 1px solid red;
  margin: 0;
}

<h1>Мы создаем легкие решения сложных задач</h1>

Answer 3

Style отдаёт null потому-что:

Либо в CSS у вас в принципе не было задано свойство margin-left
Либо начинайте выполнять js код только после полной загрузки html, он у вас может раньше отрабатывать

БЛОГ НА HUSL

Выравнять блок по центру JS

Ответы (3 шт):