Выровняйте div по центру

Как такового поплавка к центру нет. Если вы хотите центрировать элемент блока внутри другого, сделайте следующее:

<div id="outer">
  <div id="inner">Stuff to center</div>
</div>

с участием:

#outer { width: 600px; }
#inner { width: 250px; margin: 0 auto; }

Теперь это не заставит текст обтекать его (как это было бы с плавающей точкой влево или вправо), но, как я уже сказал, нет центра плавающей точки.

У меня это всегда срабатывало.

Если вы установили фиксированную ширину для своего DIV и правильный DOCTYPE, попробуйте это

div {        
  margin-left:auto;
  margin-right:auto;
}

Надеюсь это поможет.

Обычная техника для этого margin:auto

Однако старый IE не разбирается в этом, поэтому обычно добавляют text-align: center к внешнему содержащему элементу. Вы бы не подумали, что это сработает, но тот же IE, который игнорирует auto, также неправильно применяет центр выравнивания текста к внутренним элементам уровня блока, так что все работает.

И на самом деле это не настоящий поплавок.

Следующее решение сработало для меня.

  .algncenterdiv {
    display: block;
    margin-left: auto;
    margin-right: auto;
    }

плавающие блоки div по центру «работают» с комбинацией display: inline-block и text-align: center.

Попробуйте изменить ширину внешнего div, изменив размер окна этого jsfiddle

<div class="outer">
    <div class="block">one</div>
    <div class="block">two</div>
    <div class="block">three</div>
    <div class="block">four</div>
    <div class="block">five</div>
</div>

и css:

.outer {
    text-align:center;
    width: 50%;
    background-color:lightgray;
}

.block {
    width: 50px;
    height: 50px;
    border: 1px solid lime;
    display: inline-block;
    margin: .2rem;
    background-color: white;
}

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

так что мой HTML это

<div id='outer-container'>
<div id='inner-container'></div>
<div id='captions'></div>
</div>

а затем я центрирую подписи в jQuery вот так

captionWidth=$("#captions").css("width");
outerWidth=$("#outer-container").css("width");
marginIndent=(outerWidth-captionWidth)/2;
$("#captions").css("margin","0px "+marginIndent+"px");

Используйте div "spacer", чтобы окружить div, который вы хотите центрировать. Лучше всего работает с плавным дизайном. Обязательно укажите высоту проставок, иначе они не подойдут.

<style>
div.row{width=100%;}
dvi.row div{float=left;}
#content{width=80%;}
div.spacer{width=10%; height=10px;}
</style>

<div class="row">
<div class="spacer"></div>
<div id="content">...</div>
<div class="spacer"></div>
</div>

Это сработало для меня ..

div.className {
display: inline-block;
margin: auto;
}

это может вам помочь ..: D

div#outer {
  width:200px;
  height:200px;
  float:left;
  position:fixed;
  border:solid 5px red;
}
div#inner {
  border:solid 5px green;
}

<div id="outer">
  <center>
    <div id="inner">Stuff to center</div>
  </center>
</div>

Нет, это не так.

Вы можете располагать всплывающее окно с содержимым справа от элемента (float: left) или слева от элемента (float: right), при этом не предусмотрено наличие пузыря содержимого с обеих сторон.

<div id="outer" style="z-index:10000;width:99%;height:200px;margin-top:300px;margin-left:auto;margin-right:auto;float:left;position:absolute;opacity:0.9;">

<div id="inner" style="opacity:1;background-color:White;width:300px;height:200px;margin-left:auto;margin-right:auto;">Inner</div></div>

Разместите div в фоновом режиме до максимальной ширины, установите div внутри, который не является прозрачным, и отцентрируйте его с помощью поля auto.

это прекрасно работает

width:40%; // the width of the content div
right:0;
margin-right:30%; // 1/2 the remaining space

Это также прекрасно изменяет размер с адаптивными макетами.

Пример CSS:

.centered-div {
   position:fixed;
   background-color:#fff;
   text-align:center;
   width:40%;
   right:0;
   margin-right:30%;
}

Это сработало для меня.

Я дважды включал неупорядоченный список на свою страницу. Один div class = "menu" id = "vertical" другой, который нужно центрировать, был div class = "menu" id = "horizontal". Поскольку список был перемещен влево, мне понадобился внутренний div для его центрирования. Увидеть ниже.

<div class=menu id="horizontal">
<div class="fix">
  Centered stuff
</div>
</div>

.menu#horizontal { display: block;  float: left; margin: 0px; padding: 0 10px; position: relative; left: 50%; }
#fix { float: right; position: relative; left: -50%; margin: 0px auto; }

Попробуйте это, мне это помогло: оберните div в теги, проблема в том, что он также центрирует содержимое div (если не закодировано иначе). Надеюсь, это поможет :)