Как горизонтально центрировать <div>?

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

<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

138 ответов

Это так просто.

Просто решите, какую ширину вы хотите дать внутреннему элементу div, и используйте следующий CSS.

CSS

.inner{
  width: 500px; // Assumed width
  margin: 0 auto;
}

Вы можете добавить этот код:

#inner {
  width: 90%;
  margin: 0 auto;
  text-align:center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>

#outer
{
 display: grid;
 justify-content: center;

}
<div id="outer">
  <div id="inner">hello</div>
</div>
enter code here

CSS свойство justify-content

Он выравнивает элементы Flexbox по центру контейнера:

#outer {
    display: flex;
    justify-content: center;
}

Один из самых простых способов сделать это - использовать display: flex, Внешний div просто должен иметь гибкий экран, а внутренние потребности margin: 0 auto чтобы сделать его горизонтально по центру.

Чтобы центрировать вертикально и просто центрировать div внутри другого div, пожалуйста, посмотрите на комментарии ниже.inner class

.wrapper {
  display: flex;
  /* Adding whatever height & width we want */
  height: 300px;
  width: 300px;
  /* Just so you can see it is centered */
  background: peachpuff;
}

.inner {
  /* center horizontally */
  margin: 0 auto;
  /* center vertically */
  /* margin: auto 0; */
  /* center */
  /* margin: 0 auto; */
}
<div class="wrapper">
  <div class="inner">
    I am horizontally!
  </div>
</div>

Я видел много-много ответов, и все они устарели. Google уже реализовал решение этой общей проблемы, которое центрирует объект буквально посередине, что бы ни случилось, и ДА, оно реагирует. Так что никогда не делай transform() или же position вручную когда-либо снова.

.HTML

      ...
<div class="parent">
   <form> ... </form>
   <div> ... </div>
</div>

.CSS

      .parent {
   display: grid;
   place-items: center;
}
#outer {postion: relative}
#inner {
    width: 100px; 
    height: 40px; 
    position: absolute;
    top: 50%;
    margin-top:-20px; /* Half of your Height */
}

Да, это короткий и чистый код для горизонтального выравнивания. Я надеюсь, что вам нравится этот код.

.classname {
   display: box;
   margin: 0 auto;
   width: 500px /* Width set as per your requirement. */;
}

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

Примечание: вы должны установить указанную высоту на внешнюю

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

#outer{
  display: table;
  height: 100vh;
  width: 100%;
}


#inner{
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}
<div id="outer">
    <div id="inner">
      <h1>
          set content center
      </h1>
      <div>
        hi this is the best way to align your items center
      </div>
    </div>
</div>

Просто просто Margin:0px auto:

#inner{
  display: block;
  margin: 0px auto;
  width: 100px;
}
<div id="outer" style="width:100%">  
  <div id="inner">Foo foo</div>
</div>

Основными атрибутами для центрирования div являются margin: auto а также width: согласно требованиям:

.DivCenter{
    width: 50%;
    margin: auto;
    border: 3px solid #000;
    padding: 10px;
}

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

inner { width: 50%; background-color: Khaki; margin: 0 auto; }

Попробуй это:

<div id="a">
    <div id="b"></div>
</div>

CSS:

#a{
   border: 1px solid red;
   height: 120px;
   width: 400px
}

#b{
   border: 1px solid blue;
   height: 90px;
   width: 300px;
   position: relative;
   margin-left: auto;
   margin-right: auto;
}

HTML:

<div id="outer">
  <div id="inner">
  </div>
</div>

CSS:

#outer{
  width: 500px;
  background-color: #000;
  height: 500px
}
#inner{
  background-color: #333;
  margin: 0 auto;
  width: 50%;
  height: 250px;
}

Скрипка

#inner {
  display: table;
  margin: 0 auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>

Вы можете горизонтально центрировать внутри другого <div>используя text-alignСвойство в CSS.

text-align: centerиспользуется для центрирования текста внешнего div по горизонтали.

text-align: rightиспользуется для выравнивания текста по правому краю.

text-align: leftиспользуется для выравнивания текста по левому краю.

text-align: justifyиспользуется для растягивания линий, чтобы каждая линия имела одинаковую ширину.

Вместо нескольких оберток и / или автоматических полей мне подходит это простое решение:

<div style="top:50%; left:50%;
    height:100px; width:100px;
    margin-top:-50px; margin-left:-50px;
    background:url('lib/loading.gif') no-repeat center #fff;
    text-align:center;
    position:fixed; z-index:9002;">Loading...</div>

Он помещает div в центр представления (по вертикали и по горизонтали), размеры и корректирует по размеру, центрирует фоновое изображение (по вертикали и по горизонтали), центрирует текст (по горизонтали) и сохраняет div в представлении и поверх содержимого. Просто поместите в HTML body и наслаждаться.

#inner {
  width: 50%;
  margin: 0 auto;
}

Вы можете сделать это по-другому. Смотрите ниже примеры:

1. First Method
#outer {
   text-align: center;
   width: 100%;
}
#inner {
   display: inline-block;
}


2. Second method
#outer {
  position: relative;
  overflow: hidden;
}
.centered {
   position: absolute;
   left: 50%;
}

Я нашел подобное с margin-left, но может быть left также.

#inner{
    width: 100%;
    max-width: 65px; /*to adapt to screen width. Can be whatever you want*/
    left: 65px; /*this has to be approximately the same as the max-width*/
}

Прежде всего: вам нужно дать ширину второму div:

Например:

HTML

<div id="outter">
    <div id="inner"Centered content">
    </div
</div>

CSS:

 #inner{
     width: 50%;
     margin: auto;
}

Обратите внимание, что если вы не укажете ширину, она займет всю ширину линии.

#outer {
  width: 160px;
  padding: 5px;
  border-style: solid;
  border-width: thin;
  display: block;
}

#inner {
  margin: auto;
  background-color: lightblue;
  border-style: solid;
  border-width: thin;
  width: 80px;
  padding: 10px;
  text-align: center;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

Обновленный 2022 г. Центрирующий элемент по горизонтали

1. Горизонтальное центрирование с помощью flexbox

Для горизонтального центрирования таких элементов, как (div), необходимо добавитьdisplay:flexиjustify-content:centerк элементу класса css.

      <div class="center">
   <h1>I'm Horizontally center</h1>
</div>
      .center{
   display:flex;
   justify-content:center;
}

2. Горизонтальное центрирование с использованием полей

В приведенном ниже примере показано, как центрировать элементы по горизонтали, используяmarginsиwidth.

      .center{
    width:50%;
    margin:0 auto;
}

В приведенном выше коде добавилиwidth:50%иmargin:0 autoтак что элемент поровну разделяет доступное пространство междуleftиrightполя.

3. Горизонтальное центрирование с помощью преобразования

В приведенном ниже примере показано, как центрировать элементы по горизонтали, используяpositionиtransformхарактеристики.

      .center{
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
  • Впервые добавленоposition:absolute, так что этот элемент выходит из обычного потока документов.
  • во-вторых, мы добавилиleft:50%, чтобы этот элемент двигался вперед50%по направлению к оси x.
  • В-третьих, мы добавилиtransform:translateX(-50%), чтобы этот элемент отодвинулся на 50% назад и выровнялся по центру.

добавлять text-align:center; в родительский div

#outer {
    text-align: center;
}

https://jsfiddle.net/7qwxx9rs/

или же

#outer > div {
    margin: auto;
    width: 100px;
}

https://jsfiddle.net/f8su1fLz/

Я просто предлагаю использовать justify-content: center;когда контейнер отображается как гибкий. а также text-align: center; когда речь идет о текстовом элементе.

проверьте приведенный ниже код и измените его в соответствии с требованиями.

      <div id="outer">
  <div id="inner">Foo foo</div>
</div>



#outer{
     display:flex;
     align-items:center;
}

Элемент можно центрировать по горизонтали, используя свойство CSS Flexbox.

      <div class="container">
<div class="res-banner">
<img class="imgmelk"  src="~/File/opt_img.jpg" >
</div>
</div>

css-код

      .res-banner{
        width:309px;
        margin: auto;
        height:309px;
    }
Другие вопросы по тегам