Центрирование плавающих div внутри другого div

Сначала удалите атрибут float на внутренних divs. Затем поместите text-align: center на главный внешний div. А для внутренних divs используйте display: inline-block. Также было бы разумно указать им явную ширину.

<div style="margin: auto 1.5em; display: inline-block;">
  <img title="Nadia Bjorlin" alt="Nadia Bjorlin" src="headshot.nadia.png"/>
  <br/>
  Nadia Bjorlin
</div>

С помощью Flexbox вы можете легко горизонтально (и вертикально) центрировать плавающих дочерних элементов внутри div .

Итак, если у вас простая разметка, например:

<div class="wpr">
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

с CSS:

.wpr
{
    width: 400px;
    height: 100px;
    background: pink;
    padding: 10px 30px;
}

.wpr span
{
    width: 50px;
    height: 50px;
    background: green;
    float: left; /* **children floated left** */
    margin: 0 5px;
}

(Это (ожидаемый - и нежелательный) РЕЗУЛЬТАТ)

Теперь добавьте в оболочку следующие правила:

display: flex;
justify-content: center; /* align horizontal */

и плавающие дочерние элементы выравниваются по центру (ДЕМО)

Просто для удовольствия, чтобы получить вертикальное выравнивание, просто добавьте:

align-items: center; /* align vertical */

ДЕМО

Я выполнил вышеупомянутое, используя относительное позиционирование и плавание вправо.

HTML код:

<div class="clearfix">                          
    <div class="outer-div">
        <div class="inner-div">
            <div class="floating-div">Float 1</div>
            <div class="floating-div">Float 2</div>
            <div class="floating-div">Float 3</div>
        </div>
    </div>
</div>

CSS:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle: http://jsfiddle.net/MJ9yp/

Это будет работать в IE8 и выше, но не ранее (сюрприз, сюрприз!)

К сожалению, я не помню источник этого метода, поэтому я не могу отдать должное первому автору. Если кто-то еще знает, напишите ссылку!

Следующее решение не использует встроенные блоки. Однако для этого требуются два вспомогательных div:

1. Контент плавает
2. Внутренний помощник является плавающим (растягивается на столько же, сколько и содержимое)
3. Внутренний помощник сдвигается вправо на 50% (его левый угол совпадает с центром внешнего помощника)
4. Контент вытягивается влево на 50% (его центр выравнивается по левому краю внутреннего помощника)
5. Внешний помощник настроен на скрытие переполнения

.ca-outer {
  overflow: hidden;
  background: #FFC;
}
.ca-inner {
  float: left;
  position: relative;
  left: 50%;
  background: #FDD;
}
.content {
  float: left;
  position: relative;
  left: -50%;
  background: #080;
}
/* examples */
div.content > div {
  float: left;
  margin: 10px;
  width: 100px;
  height: 100px;
  background: #FFF;
}
ul.content {
  padding: 0;
  list-style-type: none;
}
ul.content > li {
  margin: 10px;
  background: #FFF;
}

<div class="ca-outer">
  <div class="ca-inner">
    <div class="content">
      <div>Box 1</div>
      <div>Box 2</div>
      <div>Box 3</div>
    </div>
  </div>
</div>
<hr>
<div class="ca-outer">
  <div class="ca-inner">
    <ul class="content">
      <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</li>
      <li>Nullam efficitur nulla in libero consectetur dictum ac a sem.</li>
      <li>Suspendisse iaculis risus ut dapibus cursus.</li>
    </ul>
  </div>
</div>

display: inline-block; не будет работать ни в одном из браузеров IE. Вот что я использовал.

// change the width of #boxContainer to 
// 1-2 pixels higher than total width of the boxes inside:

#boxContainer {         
    width: 800px; 
    height: auto;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

#Box{
    width: 240px; 
    height: 90px;
    background-color: #FFF;
    float: left;
    margin-left: 10px;
    margin-right: 10px;
}

Решение:

<!DOCTYPE HTML>
<html>
    <head>
        <title>Knowledge is Power</title>
        <script src="js/jquery.js"></script>
        <script type="text/javascript">
        </script>
        <style type="text/css">
            #outer {
                text-align:center;
                width:100%;
                height:200px;
                background:red;
            }
            #inner {
                display:inline-block;
                height:200px;
                background:yellow;
            }
        </style>
    </head>
    <body>
        <div id="outer">
            <div id="inner">Hello, I am Touhid Rahman. The man in Light</div>
        </div>
    </body>
</html>

В моем случае я не мог получить ответ от @Sampson, чтобы он работал на меня, в лучшем случае у меня был один столбец с центром на странице. Однако в процессе я узнал, как на самом деле работает поплавок, и создал это решение. По сути, исправление очень простое, но его трудно найти, о чем свидетельствует эта ветка, у которой на момент написания этой публикации было более 146 тысяч просмотров без упоминания.

Все, что нужно, - это подсчитать ширину экрана, которую будет занимать желаемый макет, затем сделать родительский элемент такой же ширины и применить margin: auto. Вот и все!

Элементы в макете будут определять ширину и высоту «внешнего» div. Возьмите каждый «myFloat» или ширину или высоту элемента + его границы + его поля и его отступы и сложите их все вместе. Затем таким же образом сложите другие элементы. Это даст вам родительскую ширину. Все они могут быть разных размеров, и вы можете сделать это с меньшим или большим количеством элементов.

Пример (каждый элемент имеет 2 стороны, поэтому границы, поля и отступы умножаются в 2 раза)

Таким образом, элемент, имеющий ширину 10 пикселей, границу 2 пикселя, поле 6 пикселей, отступ 3 пикселя, будет выглядеть так: 10 + 4 + 12 + 6 = 32

Затем сложите вместе всю общую ширину вашего элемента.

Element 1 = 32
Element 2 = 24
Element 3 = 32
Element 4 = 24

В этом примере ширина «внешнего» div будет 112.

.outer {
  /* floats + margins + borders = 270 */
  max-width: 270px;
  margin: auto;
  height: 80px;
  border: 1px;
  border-style: solid;
}

.myFloat {
    /* 3 floats x 50px = 150px */
    width: 50px;
    /* 6 margins x 10px = 60 */
    margin: 10px;
    /* 6 borders x 10px = 60 */
    border: 10px solid #6B6B6B;
    float: left;
    text-align: center;
    height: 40px;
}

<div class="outer">
  <div class="myFloat">Float 1</div>
  <div class="myFloat">Float 2</div>
  <div class="myFloat">Float 3</div>
</div>