Как сделать div самовыравнивающимся по центру вне зависимости от контента?

Question

[VANY]

Здравствуйте.
Имеется код:

<div>
Some text
</div>

div {
    margin:0 auto;
}

у родителя ширина 100%.
Как сделать ширину нашего дива с текстом зависимой от самого текста? Т.е. чтобы можно было добавлять стили background, padding и получилось а ля окошко.
*пока пользуюсь display:inline-block; но из-за этого те блоки, что рядом - лезут в ряд, предсказуемо, но тем не менее это костыль и мне это не нравится. Вот и подумал что должно быть более простое решение без фиксированного width

=== Выводы ===
Самый правильный вариант пока (по подсказке Романа)

<div>
    <div class="content">
        Some text
    </div>
</div>

.content {
    display:inline-block;
}

====upd Более понятный вариант (by Андрей)

<div class="content">
    Some text
</div>

.content {
    display:table;
    margin-left:50%;
    transform:translateX(-50%);
}

Answer 1

[Андрей]

html и css сегодня — веселье и радость.
Вот так всё делается без обертывания:
codepen.io/standys/pen/yywPvy

.content {
  display: table;
  margin-left: 50%;
  transform: translateX(-50%);
}

С поддержкой браузерами более-менее ладно — работает в ИЕ начиная с 9.
caniuse.com/#search=transform

upd: подправил пример, вместо inline-block -> table

Comments

[VANY]

Проблема рядом стоящих дивов, которые нужно отцентрировать каждый с новой строки - не решается, нужно оборачивать, но, как альтернатива жесткому width и margin-left:-width/2px -неплохо :)

[VANY]

А вот так уже круто :) особенно учитывая, что я для выравнивания предпочитаю использовать table-cell.

Answer 2

[Роман Белинский]

Гляньте, Вот

Comments

[VANY]

Я теперь начинаю понимать тех, кто говорит что html и css сегодня - печаль и тоска.
Для себя нашел единственно верным для адаптивности - родительский + inline-block для каждого элемента (которые желаю размещать с новой строки). Вам спасибо!

[65536]

Иван Украинцев: родительский + inline-block для каждого элемента - это мой подвариант , он не во всех случаях прокатывает. когда например у него будет флоат лефт и заданная ширина, которая меньше чем родительский

jsfiddle.net/r72ut41f/1

[Роман Белинский]

Иван Украинцев: рад, что помог!

Answer 3

[65536]

Даю свой ответ и присоединяюсь к вопросу

.center {
    text-align: center;
    width: 100%;
}

.c {
    display: inline-block;
    text-align: left;
}

<div class="center">
    <div class="c">
        <div class="abc">123</div>
        <div class="klmn">any klmn content</div>
    </div>
</div>

вот такой вариант. пашет 100% во всех случаях. оба дива становятся шириной 100% от ширины контейнера, в котором лежит div.center, а то что находится внутри div.c, какой бы оно ни было ширины гарантированно центрируется относительно центра div.c. работает 100%, проверено электроникой. и меня интересует нет ли способа покомпактней и поизящней без обертывания дивами.

Comments

[VANY]

Это по-сложнее. Прямо сейчас проверил - Some text - будет работать в любой ситуации. Это убого, но это меньше чем у Вас :)

[VANY]

там было много кода но его запарсил тостер, в общем обертка дивом без класса и дочерний в инлайн-блок и контент внутри него - он будет по центру. В любой ситуации.

[65536]

в каких-то случаях можно сам можно использовать уже как контейнер а вложенным давать класс "с" (а не вставлять в него еще блок), может спецы по цсс объяснят что к чему). смотря что содержится. я всегда это как заклинание пишу не задумываясь. слегка напрягает что 2 лишние строки, но гарантированно все будет по центру. на самом деле такое центрирование не часто требуется