Центральное положение абсолютный элемент внутри положение абсолютный родитель с максимальной шириной

Question

У меня есть h2, который абсолютно размещен внутри родителя div, который также абсолютно расположен. Родительский div имеет максимальную ширину 350 пикселей и то, что я хотел бы сделать, - это центр h2 внутри него. Я не хочу устанавливать left:0 и right:0 на h2, так как это растягивается, чтобы заполнить максимальную ширину 350 пикселей, вместо этого я хочу, чтобы h2 увеличивался в ширину, если добавлено больше контента. Абсолютное позиционирование h2 является требованием.

Codepen: http://codepen.io/styler/pen/mAyIt

CSS

.tt { 
    max-width: 350px; 
    min-height: 45px; 
    text-align: center; 
    position: absolute; 
    left: 0; 
    right: 0; 
    background: #8F9924; 

    .tt-content { 
    border: 2px solid black; 
    background: #ACC95F; 
    position: absolute; 
    bottom: 0; 
    padding: 5px 10px; 
    } 
} 

HTML

<div class="tt"> 
    <h2 class="tt-content">This is the content.</h2> 
</div> 

Answer 1

центр абсолютно позиционированный элемент, как это:

Предположим 500px ширина элемента:

#heading { 
    margin-left: 50%; 
    left: -250px;/* negative half-width */ 

} 

UPDATE: К сожалению, следует уплатили больше внимания на этот вопрос.

Если вам нужна динамическая ширина, тогда рассмотрите относительное позиционирование. Затем просто используйте text-align:center; для родителя.

UPDATE 2: Вам также понадобится это на вашем элементе H2: display:inline-block; Это позволит сохранить ширину div с содержимым ребенка.

Answer 2

Возможно, это поможет.

.tt-content { 
    ... 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 

ссылка: http://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Вилка из пера: http://codepen.io/jakeparis/pen/CGjni

Answer 3

попробовать это

h2{ 
width: 100%; 
position: absolute; 
left: 50%; 
margin-left: -50%; 
}