Выравнивание элемента

[exec]

Существуют ли универсальные средства для выравнивания любых элементов по горизонтали и вертикали?

float не умеет выравнивать по центру, text-align умеет, но он только для текста.

С выравниванием по вертикали тоже всё плохо.
По низу можно выравнять через position: absolute; bottom: 0, а по центру никак.

Неужели нет никаких нативных способов выравнять элемент?

[exec]

Сам я уже так намучался с этим выравниванием, что тупо делаю через js.

<p>
	Align( document.getElementById("aligned"), <span id="update">1</span> );
</p>
<div style="width: 500px; height: 350px; border: 3px solid black;">
	<div id="aligned" style="width: 100px; height: 100px; background-color: #cccccc;">
	</div>
</div>
<script type="text/javascript">

function Align(target, index, parent) {
	parent = parent || target.parentNode;
	var rect = parent.getBoundingClientRect();
	var offset = parseInt(getComputedStyle(parent).borderWidth);
	target.style.position = "absolute";
	target.style.top = [
		(offset + rect.top),
		(offset + rect.top + (parent.clientHeight - target.clientHeight) / 2),
		(rect.bottom - target.clientHeight - offset)
	][Math.floor((index - 1) / 3)] + "px";

	target.style.left = [
		(offset + rect.left),
		(rect.left + (parent.clientWidth - target.clientWidth) / 2),
		(rect.right - target.clientWidth - offset)
	][(index - 1) % 3] + "px";

	target.style.marginTop = 0;
	target.style.marginLeft = 0;
}

var update = document.getElementById("update");
var i = 1;
setInterval(function () {
	update.innerHTML = i;
	Align( document.getElementById("aligned"), i );
	i++;
	if (i == 10) i = 1;
}, 1000);

</script>

[рони]

exec,
можно обьяснить что не так с выравниванием? и зачем нужен js?

[рони]

exec,

<style type="text/css">
div {position: relative;box-sizing: border-box;}
div div {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}
</style>
<div style="width: 500px; height: 350px; border: 3px solid black;">
  <div id="aligned" style="width: 100px; height: 100px; background-color: #cccccc;">
  </div>
</div>

[nerv_]

http://frontender.info/a-guide-to-flexbox/

[ksa]

Существуют ли универсальные средства для выравнивания любых элементов по горизонтали и вертикали?

Да.
Это таблица. Простая табличка из одной строки и одной колонки сможет выровнять любой элемент по центру. Как по вертикали... Так и по горизонтали.

Теперь есть "табличные" свойства в ЦСС, которые могут это эмулировать для любого элемента
http://htmlbook.ru/css/display

Есть еще возможности HTML5...
http://html5.by/blog/flexbox/

[exec]

Ещё один вопрос назрел. Как сделать так, чтобы месяц выравнивался посередине?

Здесь всё выравнивается, но правую стрелку переносит на следующую строку:

<div style="background: #ccc; width: 300px; padding: 5px">
  <div style="float: left">◄</div>
  <div style="text-align: center">March 2017</div>
  <div style="float: right">►</div>
</div>

Если месяцу добавить float:left, то всё идёт в одну строчку, но выравнивание пропадает:

<div style="background: #ccc; width: 300px; padding: 5px">
  <div style="float: left">◄</div>
  <div style="text-align: center; float:left">March 2017</div>
  <div style="float: right">►</div>
</div>

CSS как будто издевается надо мной! Делает что угодно кроме того, что мне нужно!

[ksa]

Здесь всё выравнивается, но правую стрелку переносит на следующую строку

Как вариант...

<div style="background: #ccc; width: 300px; padding: 5px">
  <div style="float: right">►</div>
  <div style="float: left">◄</div>
  <div style="text-align: center">March 2017</div>
</div>

[clecar]

<div style="background: #ccc; width: 300px; text-align: center; padding: 5px">
<div style="float: left">◄</div>
March 2017
<div style="float: right;
">►</div>
</div>

[laimas]

Если у родителя фиксированный размер, который известен, то зачем вообще использовать float? Каждому дочернему элементу по 100рх и соответствующее выравнивание текста.