Расположение div по центру и другие тонкости позиционирования

Способ №1. Абсолютное позиционирование

Используем абсолютное позиционирование и при этом не забываем, что родительский элемент обязательно должен иметь позицию relative:

<style>
#parent{
	position:relative; /* добавили */
	background:black;
	height:300px;
}
#child{
	position:absolute; /* добавили */
	bottom:0; /* добавили */
	background:red;
	height:100px;
	width:100px;
}
</style>

<div id="parent">
<div id="child">Текст дочернего элемента</div>
</div>

Результат:

Плюсы:

Простота

Минусы:

При абсолютном позиционировании другие элементы на странице ведут себя так, будто элемента с абс. позиционированием не существует.

Это значит что в таком случае:

<style>
#parent{
	background:black;
	height:300px;
}
#child,#child2,#child3{
	display:inline-block; /* Сделали все div в одну строку */
	height:100px;
	width:100px;
}
#child{
	background:red;
}
#child2{
	background:yellow;
}
#child3{
	background:green;
}
</style>

<div id="parent">
<div id="child">Текст дочернего элемента 1</div>
<div id="child2">Текст дочернего элемента 2</div>
<div id="child3">Текст дочернего элемента 3</div>
</div>

Результат:

После проделанного выше способа получиться следующее:

Все элементы легли друг на друга, так как они не понимают, что существуют другие элементы, кроме них самих. В результате последний div (зелёный) оказался выше всех, в то время как первый (красный) ниже всех.

Конечно, кто-то может поспорить и сказать, что мы можем выставить у каждого div разную велечину left, например так:

<style>
#parent{
	position:relative; /* добавили */
	background:black;
	height:300px;
}
#child,#child2,#child3{
	position:absolute; /* добавили */
	bottom:0; /* добавили */
	height:100px;
	width:100px;
}
#child{
	left:0; /* добавили */
	background:red;
}
#child2{
	left:110px; /* добавили */
	background:yellow;
}
#child3{
	left:220px; /* добавили */
	background:green;
}
</style>

<div id="parent">
<div id="child">Текст дочернего элемента 1</div>
<div id="child2">Текст дочернего элемента 2</div>
<div id="child3">Текст дочернего элемента 3</div>
</div>

Результат:

Вроде всё отлично, зачем же нам делать как-то по-другому? Во-первых, как я уже говорил, для других элементов на странице наших абсолютно позиционированных блоков с текстом просто не существует, это может поломать вашу вёрстку.

Но это ерунда, куда важнее универсальность и рациональность. Поясняю, пользуясь способом №1 мы должны:

Знать точное количество блоков;
Для каждого блока рассчитать и написать координату left;
Если со временем мы решим добавить ещё блоков, нам опять-таки придётся снова для каждого нового блока указывать свойство left.

Атрибуты¶

Тег <div> поддерживает глобальные атрибуты и атрибуты событий.

Как добавить стиль к тегу <div> ?

Цвет текста внутри тега <div>:

• CSS свойство color определяет цвет контента и оформления текста.
• CSS свойство background-color устанавливает фоновый цвет элемента.

Стили форматирования текста для тега <div>:

• CSS свойство text-indent указывает размер отступа первой строки в текстовом блоке.
• CSS свойство text-overflow указывает, как будет отображаться пользователю строчный текст, выходящий за границы блока.
• CSS свойство white-space указывает, как будут отображены пробелы внутри элемента.
• CSS свойство word-break указывает перенос строки.

Другие свойства для тега <div>:

• CSS свойство text-shadow добавляет тень к тексту.
• CSS свойство text-align-last выравнивает последнюю строку текста.
• CSS свойство line-height устанавливает межстрочный интервал.
• CSS свойство letter-spacing устанавливает расстояние между буквами/символами в тексте.
• CSS свойство word-spacing устанавливает расстояние между словами в тексте.