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

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

Вопрос

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

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

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

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>

Принятое решение не будет работать для меня, так как мне нужен дочерний элемент с 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>

Попробуй это. Я добавил 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;
}

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

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

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

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

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

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

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

Подобно ответу @ vijayscode, он будет центрировать горизонтальный элемент inline-block по горизонтали (но без необходимости изменять стили его родителя):

  display: inline-block;
  position: relative;
  left: 50%; // Move the element to the left by 50% of the container's width
  transform: translateX(-50%); // Calculates 50% of the element's width and moves it by that amount across the X-axis to the left

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

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

Live Demo

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

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

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

line-height:50px

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