Pytanie Jak poziomo wyśrodkować
w innym
?


Jak mogę poziomo wyśrodkować <div> w innym <div> używając CSS (jeśli jest to możliwe)?

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


3636
2018-06-09 08:34


pochodzenie


Z tych wspaniałych odpowiedzi chcę tylko podkreślić, że musisz podać "#inner" jako "szerokość", albo będzie to "100%" i nie możesz powiedzieć, czy jest już wycentrowany. - Jony


Odpowiedzi:


Możesz zastosować ten CSS do wnętrza <div>:

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

Oczywiście nie musisz ustawiać width do 50%. Każda szerokość mniejsza niż zawierająca <div> będzie działać. The margin: 0 auto co to jest rzeczywiste centrowanie.

Jeśli kierujesz się na IE8 +, lepszym rozwiązaniem może być to:

#inner {
  display: table;
  margin: 0 auto;
}

Sprawi, że element wewnętrzny znajdzie się w poziomie i działa bez ustawienia konkretnego width.

Przykład roboczy tutaj:

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


4097



W przypadku centrowania w pionie zwykle używam "wysokości linii" (wysokość linii == wysokość). Jest to proste i przyjemne, ale działa tylko z jednym tekstem zawartości linii :) - Nicolas Guillaume
Musisz użyć tagu! DOCTYPE na swojej stronie html, aby działał dobrze w IE. - Fabio
Zauważ, że może być konieczne dodanie "float: none;" dla #inner. - Mert Mertce
Ustawiasz także górny i dolny margines na 0, co nie ma żadnego związku. Lepsze zakładanie margin-left: auto; margin-right: auto Myślę. - Emmanuel Touzery
Niekoniecznie margin:0 auto: to może być margin: <whatever_vertical_margin_you_need> auto drugi to pozioma marża. - YakovL


Jeśli nie chcesz ustawić stałej szerokości na wewnętrznej div możesz zrobić coś takiego:

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

#inner {
  display: inline-block;
}
<div id="outer">  
    <div id="inner">Foo foo</div>
</div>

To sprawia, że ​​wewnętrzna div do elementu śródliniowego, który można wyśrodkować za pomocą text-align.


1111



@SabaAhang poprawna składnia tego float: none; i jest prawdopodobnie potrzebny tylko dlatego, że #inner odziedziczył a float albo left lub right z innego miejsca w twoim CSS. - Doug McLean
To dobre rozwiązanie. Pamiętaj tylko, że wewnętrzna odziedziczy text-align więc możesz chcieć ustawić wewnętrzną text-align do initial lub jakąś inną wartość. - pmoleri


Najlepsze podejścia są z CSS 3.

Model pudełka:

#outer{
    width: 100%;

    /* Firefox */
    display: -moz-box;
    -moz-box-pack: center;
    -moz-box-align: center;

    /* Safari and Chrome */
    display: -webkit-box;
    -webkit-box-pack: center;
    -webkit-box-align: center;

    /* W3C */
    display: box;
    box-pack: center;
    box-align: center;
}
#inner{
    width: 50%;
}

Zgodnie z twoją użytecznością możesz również użyć box-orient, box-flex, box-direction nieruchomości.

Zgiąć:

#outer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

Przeczytaj więcej o centrowaniu elementów potomnych

I to wyjaśnia, dlaczego model pudełkowy jest najlepszym podejściem:


299



działa to również dla mnie, gdy wewnętrzny div spławił się: pozostawiony; - Tareq
Upewnij się, że czytasz ta odpowiedź najpierw zanim zaczniesz wdrażać to rozwiązanie. - cimmanon
Safari, jak na razie, nadal wymaga -webkit flagi dla flexbox (display: -webkit-flex; i -webkit-align-items: center; i -webkit-justify-content: center;) - Joseph Hansen


Przypuśćmy, że twój div jest 200px szeroki:

.centered {
  position: absolute;
  left: 50%;
  margin-left: -100px;
}

Upewnij się, że jest to element rodzica ustawione tj. względne, stałe, bezwzględne lub lepkie.

Jeśli nie znasz szerokości div, możesz użyć transform:translateX(-50%); zamiast ujemnego marginesu.

https://jsfiddle.net/gjvfxxdj/


216



To nie działa w Safari - cesards
Nie podoba mi się to rozwiązanie, ponieważ gdy element wewnętrzny jest zbyt szeroki dla ekranu, nie można przewijać całego elementu w poziomie. margin: 0 auto działa lepiej. - Aloso
dlaczego zostawiłeś margines: -100, to nie zadziała - Robert Limanto
Czytałem, że jest to jedyna metoda, która będzie działać w IE6 / 7 - Andy
margin-left: auto; margin-right: auto; centruje element blokowy - unicodexm


Stworzyłem to przykład aby pokazać, jak pionowo i poziomo  align.

Kod jest w zasadzie to:

#outer {
  position: relative;
}

i...

#inner {
  margin: auto;  
  position: absolute;
  left:0;
  right: 0;
  top: 0;
  bottom: 0;
} 

i pozostanie w center nawet kiedy ty Zmień rozmiar twój ekran.


200



+1 dla tej metody, miałem właśnie odpowiedzieć. Zauważ, że musisz zadeklarować szerokość na elemencie, który chcesz wyśrodkować w poziomie (lub wysokość, jeśli chcesz wyśrodkować w pionie). Oto obszerne wyjaśnienie: codepen.io/shshaw/full/gEiDt. Jedna z bardziej wszechstronnych i szeroko obsługiwanych metod centrowania elementów w pionie i / lub w poziomie. - stvnrynlds
Nie można używać dopełnienia wewnątrz elementu div, ale jeśli chcesz dać iluzję, użyj obramowania tego samego koloru. - Squirrl
Myślę, że aby ta metoda zadziałała, musisz ustawić wartość wysokości wewnętrznej div - Nicolas S.Xu


Niektóre plakaty wspominają o sposobie używania CSS 3 do centrowania display:box.

Ta składnia jest nieaktualna i nie powinna być już używana. [Zobacz też ten post].

Tak więc dla kompletności tutaj jest najnowszy sposób centrowania w CSS 3 przy użyciu Moduł elastyczny Box Layout.

Więc jeśli masz prosty kod jak:

<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

... i chcesz wyśrodkować swoje elementy w pudełku, oto czego potrzebujesz na elemencie nadrzędnym (.box):

.box {
    display: flex;
    flex-wrap: wrap; /* Optional. only if you want the items to wrap */
    justify-content: center; /* For horizontal alignment */
    align-items: center; /* For vertical alignment */
}

.box {
  display: flex;
  flex-wrap: wrap;
  /* Optional. only if you want the items to wrap */
  justify-content: center;
  /* For horizontal alignment */
  align-items: center;
  /* For vertical alignment */
}
* {
  margin: 0;
  padding: 0;
}
html,
body {
  height: 100%;
}
.box {
  height: 200px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  border: 2px solid tomato;
}
.box div {
  margin: 0 10px;
  width: 100px;
}
.item1 {
  height: 50px;
  background: pink;
}
.item2 {
  background: brown;
  height: 100px;
}
.item3 {
  height: 150px;
  background: orange;
}
<div class="box">
  <div class="item1">A</div>
  <div class="item2">B</div>
  <div class="item3">C</div>
</div>

Jeśli potrzebujesz obsługi starszych przeglądarek, które używają starszej składni dla flexbox oto jest dobre miejsce do patrzenia.


158



stackoverflow.com/a/10010055/1312610 - ShibinRagh
co masz na myśli przez "składnia jest przestarzała", czy jest przestarzałe? - Konga Raju
Specyfikacja Flexbox przeszła 3 główne poprawki. Najnowszy projekt pochodzi z września 2012 r., Który oficjalnie potępia wszystkie poprzednie wersje robocze. Obsługa przeglądarek jest jednak niesprawna (szczególnie stare przeglądarki systemu Android): stackoverflow.com/questions/15662578/... - cimmanon
To działało dla mnie w Chrome, gdy wersja Justina Polieya nie była. - Vern Jensen
@WouterVanherck to zależy od flex-direction wartość. Jeśli jest to "wiersz" (domyślny) - wtedy justify-content: center;  jest dla poziomego wyrównania (jak wspomniałem w odpowiedzi) Jeśli to jest "kolumna" - wtedy justify-content: center; służy do wyrównania w pionie. - Danield


Jeśli nie chcesz ustawić stałej szerokości i nie chcesz dodatkowego marginesu, dodaj display: inline-block do twojego żywiołu.

Możesz użyć:

#element {
    display: table;
    margin: 0 auto;
}

120



te same wymagania, co wyświetlanie: blok inline (quirksmode.org/css/display.html) - montrealmike
Używałem tego również, ale nigdy nie spotkałem display: table; przed. Co to robi? - Matt Cremeens


Właściwość box-align CSS3

#outer {
    width:100%;
    height:100%;
    display:box;
    box-orient:horizontal;
    box-pack:center;
    box-align:center;
}

75



Upewnij się, że czytasz ta odpowiedź najpierw zanim zaczniesz wdrażać to rozwiązanie. - cimmanon


Nie można go wyśrodkować, jeśli nie podasz mu szerokości, w przeciwnym razie zajmie domyślnie całą przestrzeń poziomą.


74



a jeśli nie znasz szerokości? Powiedz, ponieważ zawartość jest dynamiczna? - gman
maksymalna szerokość? Co z tym? - Will Hoskings