Вбудований блок CSS-центру?

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

Питання

Код працює добре, але мені не подобається display: table;. Це єдиний спосіб, коли я міг зробити центр вирівнювання класу wrap-class. Я думаю, було б краще, якби був спосіб використання 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елементи розглядаються як текст для цієї мети, тому вони також будуть по центру.

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

.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, це буде горизонтально центрувати елемент вбудованого блоку (але також не потрібно змінювати стилі його батьків):

  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;
}

Демонстраційна демонстрація

Чудова стаття, яку я знайшов, що для мене найкраще працювало - додати% до розміру

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

Просто використовуйте:

line-height:50px

Замініть "50px" на ту саму висоту, що і ваш div.