CSS центр отображения встроенного блока?

Question

У меня есть рабочий код: http://jsfiddle.net/WVm5d/ (вам может потребоваться увеличить окно результатов, чтобы увидеть эффект выравнивания по центру)

Вопрос

Код работает нормально, но мне не нравится иметь display: table;.Это единственный способ сделать центр выравнивания по классу wrap.Я думаю, что было бы лучше, если бы был способ использовать display: block; или display: inline-block;.Можно ли решить центр выравнивания другим способом?

Добавление фиксированного с в контейнер для меня не вариант.

Я также вставлю сюда свой код, если JSСсылка на скрипку в будущем будет разорвана:

body {
    background: #bbb;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: table;
    overflow: hidden;
}

.sidebar {
    width: 200px;
    float: left;
    background: #eee;
}

.container {
    margin: 0 auto;
    background: #ddd;
    display: block;
    float: left;
    padding: 5px;
}

.box {
    background: #eee;
    border: 1px solid #ccc;
    padding: 10px;
    margin: 5px;
    float: left;
}

.box:nth-child(3n+1) {
    clear: left;
}

<div class="wrap">
    <div class="sidebar">
        Sidebar
    </div>
    <div class="container">
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
        <div class="box">
            Height1
        </div>
        <div class="box">
            Height2<br />
            Height2
        </div>
        <div class="box">
            Height3<br />
            Height3<br />
            Height3
        </div>
    </div>
    <div class="sidebar">
        Sidebar
    </div>
</div>

Answer 1

Попробуй это.Я добавил text-align: center к телу и display:inline-block, чтобы обернуть, а затем удалил display: table

body {
    background: #bbb;
    text-align: center;
}

.wrap {
    background: #aaa;
    margin: 0 auto;
    display: inline-block;
    overflow: hidden;
}

Answer 2

Если у вас есть <div> с text-align:center;, то любой текст внутри него будет центрирован относительно ширины этого элемента контейнера.inline-block элементы для этой цели обрабатываются как текст, поэтому они также будут центрированы.

Answer 3

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

Я использовал свойства Flexbox justify-content и align-items, которые соответственно позволяют центрировать элементы по горизонтали и вертикали.Если для родительского элемента установлено значение center, дочерний элемент (или даже несколько элементов!) Будет идеально посередине.

Это решение не требует фиксированной ширины, что было бы для меня непригодным, посколькутекст моей кнопки изменится.

Вот демоверсия CodePen и фрагмент соответствующего кода ниже:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

.child {
  display: inline-block;
}

<div class="parent">
  <a class="child" href="#0">Button</a>
</div>

Answer 4

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

.wrapper {
      position: relative;
  }
.childDiv {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
  }

Answer 5

Просто используйте:

line-height:50px

Замените "50px" на ту же высоту, что и ваш div.

Answer 6

Вам не нужно использовать «display: table». Причина, по которой ваш запас: 0 попытка автоматического центрирования не работает, заключается в том, что вы не указали ширину.

Это будет отлично работать:

.wrap {
    background: #aaa;
    margin: 0 auto;
    width: some width in pixels since it's the container;
}

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

Answer 7

Отличная статья, которую я нашел, для меня лучше всего было добавить% к размеру

.wrap {
margin-top:5%;
margin-bottom:5%;
height:100%;
display:block;}

Answer 8

Я только что изменил 2 параметра:

.wrap {
    display: block;
    width:661px;
}

Live Demo