Как горизонтально центрировать <div>? - PullRequest
Новая
       426

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

3967 голосов
/ 22 сентября 2008

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

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

Ответы [ 98 ]

4 голосов
/ 20 декабря 2016

Вы можете использовать flexbox. 

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

Подробнее об этом можно узнать по этой ссылке: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

4 голосов
/ 20 сентября 2014

Я просто использую самое простое решение, но оно работает во всех браузерах: 

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>center a div within a div?</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }

            #outer{
                width: 80%;
                height: 500px;
                background-color: #003;
                margin: 0 auto;
            }

            #outer p{
                color: #FFF;
                text-align: center;
            }

            #inner{
                background-color: #901;
                width: 50%;
                height: 100px;
                margin: 0 auto;

            }

            #inner p{
                color: #FFF;
                text-align: center;
            }
        </style>
    </head>

    <body>
        <div id="outer"><p>this is the outer div</p>
            <div id="inner">
                <p>this is the inner div</p>
            </div>
        </div>
    </body>
</html>
4 голосов
/ 26 марта 2019

Сделай это просто! 

#outer {
  display: flex;
  justify-content: center;
}
<div id="outer">  
  <div id="inner">Foo foo</div>
</div>
4 голосов
/ 27 сентября 2017

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

<div id="parent">
  <div class="child"></div>
</div>

Стиль: 

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

Если вы хотите центрировать его по горизонтали, вы должны написать так: 

#parent {
   display: flex;
   justify-content: center;
   align-items: center;
}
4 голосов
/ 13 января 2017

Это возможно при использовании CSS 3 flexbox . У вас есть два метода при использовании flex box.

  1. Установите родительский display:flex; и добавьте свойства {justify-content:center; ,align-items:center;} к родительскому элементу. 

#outer{
  display: flex;
  justify-content: center;
  align-items: center;
  }
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
  1. Установите родителя display:flex и добавьте margin:auto; к ребенку. 

#outer{
  display: flex;
}
#inner{
  margin: auto;
}
<div id="outer" style="width:100%">
  <div id="inner">Foo foo</div>
</div>
4 голосов
/ 23 сентября 2017

Центр div в div 

.outer {
  display: -webkit-flex;
  display: flex;

  //-webkit-justify-content: center;							
  //justify-content: center;
  
  //align-items: center;

  width: 100%;
  height: 100px;
  background-color: lightgrey;
}

.inner {
  background-color: cornflowerblue;
  padding: 2rem;
  margin: auto;  
  
  //align-self: center;						
}
<div class="outer">  
  <div class="inner">Foo foo</div>
</div>
4 голосов
/ 10 мая 2017

Он также может быть отцентрирован по горизонтали и вертикали, используя абсолютное позиционирование, например: 

#outer{
    position: relative;
}

#inner{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}
3 голосов
/ 19 декабря 2017

Вот еще один способ центрирования по горизонтали с использованием flexbox и без указания какой-либо ширины для внутреннего контейнера. Идея состоит в том, чтобы использовать псевдоэлементы, которые будут подталкивать внутренний контент справа и слева.

Использование flex:1 для псевдоэлемента заставит их заполнить оставшиеся пробелы и принять одинаковый размер, а внутренний контейнер будет центрирован. 

.container {
  display: flex;
  border: 1px solid;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>

Мы также можем рассмотреть ту же ситуацию для вертикального выравнивания, просто изменив направление flex на столбец: 

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  min-height: 200px;
}

.container:before,
.container:after {
  content: "";
  flex: 1;
}

.inner {
  border: 1px solid red;
  padding: 5px;
}
<div class="container">
  <div class="inner">
    Foo content
  </div>
</div>
3 голосов
/ 07 августа 2018

Лучшее, что я использовал в своих проектах - 

<div class="outer">
    <div class="inner"></div>
</div>
.outer{
  width: 500px;
  height: 500px;
  position: relative;
  background: yellow;
}
.inner{
  width: 100px;
  height: 100px;
  background:red;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

скриптовая ссылка

3 голосов
/ 07 марта 2019 

.outer
{
  background-color: rgb(230,230,255);
  width 100%;
  height: 50px;
}
.inner
{
  background-color: rgb(200,200,255);
  width: 50%;
  height: 50px;
  margin: 0 auto;
}
<div class="outer">
  <div class="inner">
    margin 0 auto
  </div>
</div>
Страница:
...