Как поместить кнопку в HTML посередине, относительно оси х

Question

Если я уже создал кнопку

<button>text</button>

И мне нужно разместить ее посередине ОТНОСИТЕЛЬНО оси х, то как это сделать, используя css ?

Answer 1

Вот наиболее распространенные способы центрирования по горизонтали и вертикали на начало декабря 2024:

1. Display: grid

.parent {
     display: grid;
     place-content: center
}

2. Display: flex (способ 1)

.parent {
     display: flex;
     align-items: center;
     justify-content: center
}

3. Display: flex (способ 2)

.parent {
     display: flex
}
.child {
     margin: auto
}

4. Position: absolute (способ 1)

.parent {
     position: relative
}
.child {
     position: absolute;
     top: 50%;
     left: 50%;
     translate: -50% -50%
}

5. Position: absolute (способ 2)

.parent {
     position: relative;
     --width: <Ширина дочернего элемента>;
     --height: <Высота дочернего элемента>
}
.child {
     position: absolute;
     top: 50%;
     left: 50%;
     width: var(--width);
     height: var(--height);
     margin: calc(-.5 * var(--width)) calc(-.5 * var(--height))
}

Answer 2

Вариантов много - вот один из них.
P.S. Стиль для .example приведен только для наглядности.

Я не гуру CSS, так что, возможно, кто-то предложит более изящное решение.

.example {
  height: 50px;
  border: 1px solid green;
}

button {
  margin: 0 auto;
  display: block;
}

<div class="example">
  <button>Текст на кнопке</button>
</div>

БЛОГ НА HUSL

Как поместить кнопку в HTML посередине, относительно оси х

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