Вот пример, который я сделал именно из того, что вы ищете:
(jsFiddled здесь: http://jsfiddle.net/yohphomu/)
Предупреждение:
Если я правильно понимаю ваш вопрос, нет необходимости задавать высоту или ширину, потому что по умолчанию установлено значение auto (при этом вы можете использовать auto), но единственная проблема в том, что если вы хотите изменить фон или поставить рамку, это сделает его больше, чем желаемое поле. Почему это так и как нам это исправить, читайте дальше.
Любой, у кого возникла эта проблема, ничего не понял (если у вас есть эта проблема и вы используете div), что-либо между тегами div считается (для целей понимания) полным набором, что означает, что в этом div есть все, что вы хотите, чтобы это обозначало (компьютеры делают то, что им говорят, а не то, что вы хотите, чтобы они делали), поэтому (например), чтобы установить выравнивание текста по центру, ему нужно все пространство строк и (в конечном итоге), если оно имело граница, это будет ограничивать все пространство, которое он использовал. Если вы понимаете это, читайте дальше, если не хорошо, я не могу вам там помочь.
Итак, теперь, когда мы понимаем, что происходит, как мы можем это исправить? Ну, нам нужна одна часть для центрирования, а другая для окраски. В моем примере я использовал div, чтобы отцентрировать его и охватить цветом. Нужен ли мне div? Я уверен, что я не сделал. Я мог бы добиться того же, используя p для центрирования (или я мог бы избавиться от p и просто использовать div). Я сделал это потому, что организовал это.
Надеюсь, это ответило на ваш вопрос. За ответ я потратил 4 года, а я - 30 минут, чтобы понять его (и я уже несколько дней изучаю CSS).
Пример:
<div class='container'>
<div class="text">
text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
</div>
<div class="holder">
<p><span>text here</span></p>
</div>
<div>
text text text text text text text text text text text
text text text text text text text text text text text text text text text text text
</div>
</div>
Тогда CSS будет выглядеть так:
.container {
width: 500px;
height: 500px;
}
.text {
font-size: 20px;
}
.holder {
text-align: center;
}
span {
background-color: blue;
border: 1px solid black;
}
Примечание: я установил контейнер с заданными шириной и высотой, потому что я одновременно работал над проектом и имитировал полный экран с текстом.
Также обратите внимание, что я сделал так, чтобы текст имел отдельный фоновый цвет с рамкой. Я сделал это, чтобы показать, что его измерения независимы и, при необходимости, масштабировать.