Как выравнять текст по центру?

Question

[Rufix]

Не получается выравнять текст по центру. Я не особо понимаю принцип позиционирования, и вот столкнулся с проблемой, когда нужно сверстать слайдер.
Скриншот как есть, и как надо: https://imgur.com/a/R33Satc

<section id="slider">
	<div class="slider">
		<img src="img/background.png" alt="Slider">
		<h1 class="slider__title">lian creative agency</h1>
	</div>
</section>

.slider > img{
	width: 100%;
}

.slider{
	position: relative;;
}

.slider__title{
	position: absolute;
	font-size: 48px;
	font-weight: 300;
	text-transform: uppercase;
	background-color: #000;
	color: white;
	top: 35%;
}

Answer 1

[ⓒⓢⓢ]

зря, конечно, тут абсолютом центрировать, но если хочется, то пробуйте так:

left: 50%;
transform: translateX(-50%);

Comments

[Rufix]

Помогло. Но можете объяснить, как делать такие слайдеры, помимо абсолюта, и что делает вторая строчка?

[ⓒⓢⓢ]

left: 50%; // сдвигает блок на 50% размера от родителя (в правую сторону)
transform: translateX(-50%); // сдвигает блок в левую сторону (отрицательное число) на размер 50% этого самого блока.

[ⓒⓢⓢ]

Но можете объяснить, как делать такие слайдеры

Вариантов много, в общих случаях делаю так (псевдокод):

.slider {
  width: 100%; height: 100vh;
  display: flex;
}
.slider__title {
  margin: auto;
  ...
}

Но у вас тут нет разметки для самих слайдов, что затруднит позиционирование и переключение слайдов. Фоновую картинку логичнее положить фоном в блок - это же фон ...

[Ярослав Иванов]

JRK_DV, зачем тут transform: translateX(-50%) если у него абсолют ?
Rufix, left:0; right: 0; margin: auto;

[Анатолий]

Rufix, если вам помог ответ — отметьте его решением.

[Rufix]

JRK_DV, вопрос, а нужно ли пользоваться бустрап и его классами для слайдера?

[ⓒⓢⓢ]

Rufix, нет, пока вы не можете использовать чистые стили, бутстрап будет только вредить

Ярослав Иванов,

зачем тут transform: translateX(-50%) если у него абсолют ?

при "left:0; right: 0; margin: auto;" блок и текст не отцентрируется, надо дополнительно text-align прописывать.
так же можно и "left: 0; width: 100%; text-align: center;"
Кому как больше нравиться ...

[Ярослав Иванов]

JRK_DV, чтобы и в ie5 работало

[Андрей]

Rufix, тем более в Bootstrap есть готовый слайдер