Центрировать контейнер div без установочной ширины

Ответ 1

Flexbox может даже центрировать плавающих детей!

Поэтому я могу просто добавить display:flex и justify-content: center; в контейнер

.container {
    margin: 10px auto;
    display:flex;
    justify-content: center; /* align horizontal */
}

FIDDLE

Поддержка браузера в эти дни также хороша

.wrapper {
  width: 100%;
  text-align: center
}
.container {
  margin: 10px auto;
  display: flex;
  justify-content: center;
  /* align horizontal */
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  float: left;
  padding: 20px
}

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

Ответ 2

Одним из решений является замена float встроенным блоком:

.wrapper {
  text-align: center
}
.container {
  margin: 10px auto;
  font-size: 0;
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}

<div class="wrapper">
  <div class="container">
    <div class="left box">Content</div>
    <div class="right box">Content</div>
  </div>
</div>

Ответ 3

Я думаю, вы должны использовать ниже css

.wrapper {
  width: 100%;
  text-align: center
}
.container {
  margin: 10px auto;
  font-size: 0;
}
.left {
  width: 69%;
  max-width: 350px;
  background: blue
}
.right {
  width: 29%;
  max-width: 150px;
  background: red
}
.box {
  display: inline-block;
  padding: 20px;
  font-size: 16px;
}

<div class="wrapper">
    <div class="container">
        <div class="left box">Content</div>
        <div class="right box">Content</div>
    </div>
</div>

Ответ 4

Да, вы можете поместить div в центр без использования свойства width в соответствии с вашими потребностями.

Скажите, что у вас есть контент с переменной шириной. Если это просто текст, вы, вероятно, можете уйти с text-align:center. Но скажите, что это образ, и это изображение может иметь разные размеры. Как вы последовательно центрируете его на странице?

Сначала разместите содержимое внутри плавающего div, потому что плавающие divs уменьшат обертку вокруг содержимого. Во-вторых, оберните этот div в другой плавающий div.

Теперь вот хорошая часть. Относительно поместите внешний поплавок (желтый) left:50%, чтобы левый край находился посередине страницы. Затем относительно поместите внутренний поплавок (красный) left:-50%, чтобы сдвинуть его ровно 1/2 от желтой ширины div влево, чтобы он был центрирован. Обратите внимание, что желтый div и красный div имеют одинаковую ширину, потому что желтый цвет также является поплавком, поэтому он усаживается, чтобы поместиться вокруг красного.

Фоновые цвета и высоты включены, чтобы дать понять, что происходит. Как правило, у желтого div нет спецификации высоты и без дополнений, и он будет установлен на ваш цвет фона. Красный div - это тот, который мы пытаемся центрировать.

Для справки вы можете проверить ссылку http://www.tightcss.com/centering/center_variable_width.htm

Пример примера, чтобы показать, как он работает

    .container
    	{
    		float: left;
            position: relative;
            left: 50%;
            padding-top: 10px;
    	}
    	.center {
            float: left;
            position: relative;
            left: -50%;
            background: red;

    }

    <div class="main_container">
    	<div class="container">
      		<div class="center">sample content</div>
      		<div style="clear:both;"> </div>
    	</div>
        <div class="clear"> </div>
    </div>

Ответ 5

У вас есть значение заполнения в .box. Таким образом, ширина левого и правого прямоугольников не соответствовала бы. Попробуйте уменьшить значение ширины, тогда оно должно работать:

.wrapper {text-align:center}
.container {width:100%; margin: 10px auto}
.left {width:67%;max-width:350px; background:blue}
.right {width:27%;max-width:150px; background:red}
.box {float:left;padding:20px}

Ответ 6

Вы можете попробовать стиль ниже, заменив ваш поплавок налево display: inline-block;

.wrapper {width:100%; text-align:center}
.container {margin: 10px auto; font-size: 0}
.left {width:69%;max-width:350px; background:blue}
.right {width:29%;max-width:150px; background:red}
.box{
    display: inline-block;
    font-size: 14px; 
    padding: 20px 0;
}

Рабочая скрипта

Ответ 7

Вместо того, чтобы плавать поля, используйте

display: inline-block;

См. DEMO.