Динамические отступы в блоке

[oslayer]

Есть конструкция

<style>.content {width:100%}
<div class="content">содержимое</div>

Как сделать такое? Логику понимаю, в js знания стремятся к нулю

Логика работы
Внутри блока content есть содержимое для которого необходимо установить равные отступы слева и справа в зависимости от ширины окна браузера

Событие должно работать при изменении размеров окна. Window.resize

Алгоритм выравнивания такой
1.Получаем ширину Content (вероятно InnerWidth)
2.Получаем ширину окна(Window)
3.Переменная1 = Ширина окна - Ширина Content
4.Переменная2 = Переменная1 / 2
5.Присваиваем блоку Content значения CSS
Padding-left:Переменная2;Padding-right:Переменная2;

[j0hnik]

для этого достаточно css

[oslayer]

для этого достаточно css

Можно пример на CSS в таком случае? я не знаю валидного способа это сделать, тем более в динамике

[j0hnik]

<style>
	.content{
		margin: 0 20%;
		text-align: center;
		border: 1px solid red;
	}
</style>

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, voluptas, repellendus. 
Minima repellat deserunt veritatis, provident a illo labore numquam nam nesciunt cumque. 
Perspiciatis nihil, repudiandae blanditiis molestias consequatur quia.500</div>

[j0hnik]

тем более в динамике

да-да, css так и работает

[oslayer]

Это не то что нужно совершенно. т.к. при разных разрешениях экрана 20% будут разные, а содержимое блока Content грубо говоря статическую ширину.
т.е. ну к примеру ширина экрана 1000,Content занимает постоянно 800.
Отступы ставим в процентах, их нужно в процентах, т.к. 1000 динамическая величина. Соотвественно padding:10%, но как только ширина экрана увеличивается или уменьшается то padding 10% становится некорректным значением. Вот для этого и нужен описаный мной алгоритм. Вы можете дать пример на JS?

[j0hnik]

<style>
	.content{
		width: 800px;
		margin: 0 auto;
		text-align: center;
		border: 1px solid red;
	}
</style>

<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed, voluptas, repellendus. 
Minima repellat deserunt veritatis, provident a illo labore numquam nam nesciunt cumque. 
Perspiciatis nihil, repudiandae blanditiis molestias consequatur quia.500</div>

вам хоть базовые знания по css надо приобрести

[oslayer]

Не работает text-align, не с Important и вообще никак. bootstrap justify тоже не работает.. Вы можете показать пример на JS? Если нет, то вы лично врядли сможете мне помочь

[BSwan]

text-align - это только для текста, а не для блока content
margin: 0 auto; - ставит Ваш блок в середину окна.
Вот пример от j0hnik он рабочий.

https://jsfiddle.net/bsawn/ujota35k/