Как центрировать элемент <p>внутри контейнера <div>?

Я хочу, чтобы мой элемент <p> находился в центре контейнера <div>, как в идеально центрированном - верхнее, нижнее, левое и правое поля разбивали пространства одинаково.

Как я могу это достичь?

div {
  width: 300px;
  height: 100px;
}
p {
  position: absolute;
  top: auto;
}
<div>
  <p>I want this paragraph to be at the center, but it not.</p>
</div>

ОТВЕТЫ

Ответ 1

Вам не нужно абсолютное позиционирование Используйте

p {
 text-align: center;
line-height: 100px;

}

И настройте по желанию...

Если текст превышает ширину и проходит более одной строки

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

(я добавил фон для лучшего представления примера)

div
{
  width:300px;
  height:100px;  
  display: table; 
  background:#ccddcc;  
}


p {
  text-align:center; 
  vertical-align: middle;
  display: table-cell;   
}

Играйте с этим в JBin

enter image description here

Ответ 2

Чтобы получить центрирование влево/вправо, примените text-align: center к div и margin: auto к p.

Для вертикального позиционирования вы должны убедиться, что понимаете разные способы сделать это, это часто задаваемая проблема: Вертикальное выравнивание элементов в div

Ответ 3

♣ вы должны сделать следующие шаги:

  • элемент должен позиционировать (для EXP вы можете указать его позицию: relative;)
  • дочерний элемент должен располагать " Абсолютный", а значения должны быть такими: top: 0; buttom: 0; right: 0; left: 0; (быть средним по вертикали)
  • для дочернего элемента вы должны установить " margin: auto" (чтобы быть средним по вертикали)
  • дочерний и материнский элемент должен иметь значение "высота" и "ширина"
  • для материнского элемента = > text-align: center (чтобы быть средним по горизонтали)

♣♣ просто вот итог этих 5 шагов:

.mother_Element {
    position : relative;
    height : 20%;
    width : 5%;
    text-align : center
    }
.child_Element {
    height : 1.2 em;
    width : 5%;
    margin : auto;
    position : absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    }

Ответ 4

Центрированный и средний контент?

Сделайте это так:

<table style="width:100%">
    <tr>
        <td valign="middle" align="center">Table once ruled centering</td>
    </tr>
</table>

I воспроизвел его здесь

Ха, позвольте мне угадать.. вы хотите DIVs..

просто сделайте, чтобы ваш первый наружный DIV вел себя как таблица-ячейка, а затем стирайте его вертикальным выравниванием: посередине;

<div>
    <p>I want this paragraph to be at the center, but I can't.</p>
</div>

div {
    width:500px;
    height:100px;
    background-color:aqua;
    text-align:center;
    /*  there it is */
    display:table-cell;
    vertical-align:middle;
}

jsfiddle.net/9Mk64/

Ответ 5

Вам нужно добавить text-align: center в <div>

В вашем случае также удалите оба стиля, добавленные в ваш <p>.

Посмотрите демо здесь: http://jsfiddle.net/76uGE/3/

Удача