Как вы легко горизонтально центрируете <div> с помощью CSS?

Я пытаюсь горизонтально центрировать элемент блока <div> на странице и установить минимальную ширину. Каков самый простой способ сделать это? Я хочу, чтобы элемент <div> был встроен в остальную часть моей страницы. Я попытаюсь привести пример:

page text page text page text page text
page text page text page text page text
               -------
               | div |
               -------
page text page text page text page text
page text page text page text page text

Ответ 1

В случае нефиксированной ширины div (т.е. вы не знаете, сколько места займет div).

#wrapper {
  background-color: green; /* for visualization purposes */
  text-align: center;
}
#yourdiv {
  background-color: red; /* for visualization purposes */
  display: inline-block;
}
<div id="wrapper">    
    <div id="yourdiv">Your text</div>
</div>

Ответ 2

В большинстве браузеров это будет работать:

div.centre {
  width: 200px;
  display: block;
  background-color: #eee;
  margin-left: auto;
  margin-right: auto;
}
<div class="centre">Some Text</div>

Ответ 3

margin: 0 auto;

как сказал ck, min-width поддерживается не всеми браузерами

Ответ 4

Название вопроса и содержимого на самом деле другое, поэтому я опубликую два решения для этого, используя Flexbox.

Я думаю, Flexbox заменит/добавит текущее стандартное решение к моменту, когда IE8 и IE9 будут полностью уничтожены;)

Проверьте текущую таблицу совместимости браузера для flexbox

Одиночный элемент

.container {
  display: flex;
  justify-content: center;
}
<div class="container">
  <img src="http://placehold.it/100x100">
</div>

Ответ 5

Если старые браузеры не являются проблемой, используйте HTML5/CSS3. Если они есть, примените полисы и по-прежнему используйте HTML5/CSS3. Я предполагаю, что у вашего div нет полей или paddings здесь, но их относительно легко учесть. Код следует.

.centered {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

Что это такое:

  • Поместите div относительно своего контейнера;
  • Поместите левую границу div на 50% от ширины контейнера горизонтально;
  • Переведите горизонтально на 50% div собственную ширину.

Легко представить этот процесс, чтобы подтвердить, что div будет в конечном счете горизонтально центрироваться. В качестве бонуса вы можете центрировать вертикально без каких-либо дополнительных затрат:

.centered-vertically {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

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

Не забывайте приставки префикса для transform при необходимости.

Ответ 6

CSS, HTML:

div.mydiv {width: 200px; margin: 0 auto}
<div class="mydiv">
    
    I am in the middle
    
</div>

Ответ 7

.center {
   margin-left: auto;
   margin-right: auto;
}

Минимальная ширина не поддерживается глобально, но может быть реализована с использованием

.divclass {
   min-width: 200px;
}

Затем вы можете установить свой div как

<div class="center divclass">stuff in here</div>

Ответ 8

Вы должны использовать position: relative и text-align: center для родительского элемента, а затем display: inline-block для дочернего элемента, который хотите центрировать. Это простой шаблон дизайна CSS, который будет работать во всех основных браузерах. Ниже приведен пример ниже или посмотрите Пример CodePen.

p {
  text-align: left;
}
.container {
  position: relative;
  display: block;
  text-align: center;
}
/* Style your object */

.object {
  padding: 10px;
  color: #ffffff;
  background-color: #556270;
}
.centerthis {
  display: inline-block;
}
<div class="container">

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius An Maius Septentrionarius Plas Inproportionabilit Constantinopolis Particularisticus.</p>

  <span class="object centerthis">Something Centered</span>

  <p>Aeroplanigera Mi Psychopathologia Subdistinctio Chirographum Intuor Sons Superbiloquentia Os Sors Sesquiseptimus Municipatio Archipresbyteratus O Conclusio Compedagogius.</p>
</div>

Ответ 9

вы можете использовать margin: 0 auto для своего css вместо margin-left: auto; margin-right: auto;

Ответ 10

Пожалуйста, используйте приведенный ниже код, и ваш div будет в центре.

.class-name {
    display:block;
    margin:0 auto;
}

Ответ 11

После девяти лет я думал, что пришло время принести новую версию. Вот мои два (и теперь один) фаворита.

Поле

Установите margin на auto. Вы должны знать, что последовательность направления является margin: *top* *right* *bottom* *left*; или margin: *top&bottom* *left&right*

aside{
    display: block;
    width: 50px;
    height: 100px;
    background-color: green;
    float: left;
}

article{
    height: 100px;
    margin: 0 0 0 50px; /* 50px aside width */
    background-color: grey;
}

div{
  margin: 0 auto;
  display:block;
  width: 60px;
  height: 60px;
  background-color: blue;
  color: white;
}
<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <aside>
        </aside>
        <article>           
                <div>The div</div>
        </article>
    </body>
</html>

Ответ 12

Если вы знаете ширину вашего div и он фиксирован, вы можете использовать следующую CSS:

margin-left: calc(50% - 'half-of-your-div-width');

где 'half-of-your-div-width' должна быть (очевидно) половиной ширины вашего div.

Ответ 13

.center {
  height: 20px;
  background-color: blue;
}

.center>div {
  margin: auto;
  background-color: green;
  width: 200px;
}
<div class="center">
  <div>You text</div>
</div>

Ответ 14

Если ваш <div> имеет position: absolute, вам нужно использовать width: 100%;

#parent {
    width: 100%;
    text-align: center;
}

    #child {
        display: inline-block;
    }

Ответ 15

Добавьте этот класс в ваш CSS файл, он будет отлично работать шаги, чтобы сделать:

1) создайте это первым

<div class="center-role-form">
  <!--your div (contrent) place here-->
</div>

2) добавь это в свой css

.center-role-form {
    width: fit-content;
    text-align: center;
    margin: 1em auto;
    display: table;
}

Ответ 16

Здесь я добавляю правильный ответ

Вы можете использовать этот код фрагмента и настроить. Здесь я использую 2 дочерних блока. Это должно показать центр страницы. Вы можете использовать один или несколько блоков.

<html>
<head>
<style>
#parent {
    width: 100%;
    border: solid 1px #aaa;
    text-align: center;
    font-size: 20px;
    letter-spacing: 35px;
    white-space: nowrap;
    line-height: 12px;
    overflow: hidden;
}

.child {
    width: 100px;
    height: 100px;
    border: solid 1px #ccc;
    display: inline-block;
    vertical-align: middle;
}
</style>
</head>

<body>

<div class="mydiv" id="parent">


<div class="child">
Block 1
</div>
<div class="child">
Block 2
</div>

</div>
</body>
</html>

Ответ 17

В вашем html файле вы пишете:

<div class="banner">
  Center content
</div>

ваш файл css, который вы пишете:

.banner {
display: block;
margin: auto;
width: 100px;
height: 50px;
}

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

Ответ 18

Использование margin-left: auto и margin-right: авто может не работать в определенных ситуациях. Вот решение, которое всегда будет работать. Вы указываете требуемую ширину и задаете левый край до половины оставшейся ширины.

    <div style="width:80%; margin-left:calc(10%);">
        your_html
    </div>

Ответ 19

Лучший ответ на этот вопрос - использовать margin-auto, но для его использования вы должны знать width своего div в px или %.

Код CSS:

div{
    width:30%;
    margin-left:auto;
    margin-right:auto;
}

Ответ 20

Я использую теги div и span вместе с css-свойствами, такими как блок, кросс-браузерный встроенный блок и центр выравнивания текста, см. мой простой пример

<!DOCTYPE html>
<html>
    <head>
       <title>Page Title</title>
       <style>
           .block{display:block;}
           .text-center{text-align:center;}
           .border-dashed-black{border:1px dashed black;}
           .inline-block{
                 display: -moz-inline-stack;
                 display: inline-block;
                 zoom: 1;
                 *display: inline;
            }
           .border-solid-black{border:1px solid black;}
           .text-left{text-align:left;}
        </style>
    </head>
    <body>
          <div class="block text-center border-dashed-black">
              <span class="block text-center">
                  <span class="block"> 
        <!-- The Div we want to center set any width as long as it is not more than the container-->
                      <div class="inline-block text-left border-solid-black" style="width:450px !important;">
                             jjjjjk
                      </div> 
                  </span>
              </span>
          </div>
      </body>
   </html>

Ответ 21

Использование jQuery:

$(document).ready(function() {
    $(".myElement").wrap( '<span class="myElement_container_new"></span>' ); // for IE6
    $(".myElement_container_new").css({// for IE6
        "display" : "block",
        "position" : "relative",
        "margin" : "0",
        "padding" : "0",
        "border" : "none",
        "background-color" : "transparent",
        "clear" : "both",
        "text-align" : "center"
    });
    $(".myElement").css({
        "display" : "block",
        "position" : "relative",
        "max-width" : "75%", // for example
        "margin-left" : "auto",
        "margin-right" : "auto",
        "clear" : "both",
        "text-align" : "left"
    });
});

или, если вы хотите центрировать каждый элемент с классом ".myElement":

$(document).ready(function() {
    $(".myElement").each(function() {
        $(this).wrap( '<span class="myElement_container_new"></span>' ); // for IE6
        $(".myElement_container_new").css({// for IE6
            "display" : "block",
            "position" : "relative",
            "margin" : "0",
            "padding" : "0",
            "border" : "none",
            "background-color" : "transparent",
            "clear" : "both",
            "text-align" : "center"
        });
        $(this).css({
            "display" : "block",
            "position" : "relative",
            "max-width" : "75%",
            "margin-left" : "auto",
            "margin-right" : "auto",
            "clear" : "both",
            "text-align" : "left"
        });
    });
});

Ответ 22

вы можете использовать позицию: relative; а затем установите левое и верхнее значения:

.cenverDiv{
    position:relative;
    left:30%;
    top:0px;
}