Jak wyśrodkować w poziomie <div>

4285

Jak mogę wycentrować poziomo <div>w innym <div>za pomocą CSS?

<div id="outer">
  <div id="inner">Foo foo</div>
</div>
Peter Mortensen
źródło
13
Spośród tych świetnych odpowiedzi chcę tylko podkreślić, że musisz nadać „#inner” „szerokość”, albo będzie to „100%”, i nie możesz powiedzieć, czy jest już wyśrodkowane.
Jony
Joma Tech sprowadził mnie tutaj
Barbu Barbu
@Barbu Barbu: W jaki sposób? W jakim kontekście?
Peter Mortensen

Odpowiedzi:

4725

Możesz zastosować ten CSS do wewnętrznej <div>:

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

Oczywiście, nie trzeba ustawić widthsię 50%. Działa dowolna szerokość mniejsza niż zawierająca <div>. To margin: 0 autowłaśnie robi faktyczne centrowanie.

Jeśli korzystasz z przeglądarki Internet Explorer 8 (i nowszych), może być lepsza opcja:

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

Sprawi, że wewnętrzny element wyśrodkuje się w poziomie i będzie działać bez ustawiania określonego width.

Przykład działania tutaj:

#inner {
  display: table;
  margin: 0 auto;
  border: 1px solid black;
}

#outer {
  border: 1px solid red;
  width:100%
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

bharadhwaj
źródło
12
Do centrowania w pionie zwykle używam „wysokość linii” (wysokość linii == wysokość). To proste i przyjemne, ale działa tylko z tekstem o treści jednego wiersza :)
Nicolas Guillaume
98
Musisz użyć tagu! DOCTYPE na swojej stronie HTML, aby działał dobrze w IE.
Fabio
15
Pamiętaj, że może być konieczne dodanie „float: none;” dla #inner.
Mert Mertce,
15
Ustawiasz także górny i dolny margines na 0, co nie jest powiązane. margin-left: auto; margin-right: autoMyślę, że lepiej umieścić .
Emmanuel Touzery
13
Niekoniecznie margin:0 auto: może być margin: <whatever_vertical_margin_you_need> autodrugim marginesem poziomym.
JakowL,
1243

Jeśli nie chcesz ustawiać stałej szerokości na wewnętrznej stronie, divmoż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 czyni wnętrze divwewnętrznym elementem, który można wyśrodkować text-align.

Alfred
źródło
13
@SabaAhang dla tego poprawna składnia byłaby float: none;i prawdopodobnie jest potrzebna tylko dlatego, że #inner odziedziczył floatjeden leftlub jeden rightz innego kodu CSS.
Doug McLean,
7
To miłe rozwiązanie. Wystarczy pamiętać, że wewnętrzna posiądą text-alignwięc może chcesz ustawić wewnętrzne-tych text-aligndo initiallub inną wartością.
pmoleri
fajne rozwiązanie, tak mi się wydaje
Simon
381

Najlepszym podejściem jest CSS 3 .

Model pudełkowy:

#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%;
}
<div id="outer">
  <div id="inner">Foo foo</div>
</div>

W zależności od użyteczności możesz również korzystać z box-orient, box-flex, box-directionwłaściwości.

Flex :

#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 box jest najlepszym rozwiązaniem :

Konga Raju
źródło
25
Przeczytaj najpierw tę odpowiedź, zanim zaczniesz wdrażać to rozwiązanie.
cimmanon
4
Safari, jak na razie, nadal wymaga -webkitflagi dla schematu flexbox ( display: -webkit-flex;a -webkit-align-items: center;i -webkit-justify-content: center;)
Joseph Hansen
Zawsze myślę, że użycie kodu partii jest złą praktyką, na przykład w tym kodzie centruję div: display: table; margines: auto; proste i łatwe
simon
Czy to ja, czy ten fragment kodu nie jest wyśrodkowany
Mike
W 2020 roku możemy korzystać z Flexbox caniuse.com/#feat=flexbox
tonygatta
251

Załóżmy, że div ma szerokość 200 pikseli:

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

Upewnij się, że element nadrzędny jest ustawiony , tzn. Względny, stały, absolutny lub lepki.

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

https://jsfiddle.net/gjvfxxdj/

Dzięki CSS calc () kod może być jeszcze prostszy:


.centered {
  width: 200px;
  position: absolute;
  left: calc(50% - 100px);
}

Zasada jest nadal taka sama; umieść przedmiot na środku i zrekompensuj szerokość.

nuno_cruz
źródło
Nie podoba mi się to rozwiązanie, ponieważ gdy wewnętrzny element jest zbyt szeroki dla ekranu, nie można przewijać całego elementu w poziomie. margines: 0 auto działa lepiej.
Aloso,
margines lewy: auto; margines z prawej: auto; wyśrodkowuje element na poziomie bloku
killscreen
Domyślna szerokość dla większości elementów na poziomie bloku to auto, która wypełnia dostępny obszar na ekranie. Samo wyśrodkowanie umieszcza go w tej samej pozycji, co lewe wyrównanie. Jeśli chcesz, aby był wyśrodkowany wizualnie, powinieneś ustawić szerokość (lub maksymalną szerokość, chociaż Internet Explorer 6 i wcześniejsze nie obsługują tego, a IE 7 obsługuje go tylko w trybie standardowym).
killscreen
228

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

Kod jest w zasadzie taki:

#outer {
  position: relative;
}

i...

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

I pozostanie centernawet w przypadku zmiany rozmiaru ekranu.

Tom Maton
źródło
12
+1 za tę metodę, miałem właśnie odpowiedzieć. Pamiętaj, że musisz zadeklarować szerokość elementu, który chcesz wyśrodkować w poziomie (lub wysokość, jeśli wyśrodkujesz w pionie). Oto wyczerpujące wyjaśnienie: codepen.io/shshaw/full/gEiDt . Jedna z bardziej wszechstronnych i szeroko wspieranych metod centrowania elementów w pionie i / lub w poziomie.
stvnrynlds
6
Nie możesz używać wypełnienia w 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ć
zi
212

Niektóre plakaty wspominały o CSS 3 sposób korzystania z centrum display:box.

Ta składnia jest nieaktualna i nie należy jej już używać. [Zobacz także ten post] .

Tak więc, dla kompletności, oto najnowszy sposób na wyśrodkowanie w CSS 3 za pomocą modułu elastycznego układu pól .

Więc jeśli masz proste znaczniki, takie jak:

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

... a chcesz wyśrodkować swoje elementy w polu, 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 */
}

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

Danield
źródło
co rozumiesz przez „składnia jest nieaktualna”, czy jest przestarzała?
Konga Raju,
6
Specyfikacja Flexbox przeszła 3 główne zmiany. Najnowszy projekt pochodzi z września 2012 r., Który oficjalnie zastępuje wszystkie poprzednie projekty. Jednak obsługa przeglądarek jest nierówna (szczególnie stare przeglądarki Androida): stackoverflow.com/questions/15662578/...
cimmanon
To działało dla mnie w Chrome, gdy nie działała wersja Justina Polieya.
Vern Jensen
To nie jest „justify-content: center;” dla wyrównania w pionie i „wyrównaj-elementy: środek;” do wyrównania w poziomie?
Wouter Vanherck
3
@WouterVanherck zależy od flex-directionwartości. Jeśli jest to „wiersz” (domyślnie) - justify-content: center; oznacza to wyrównanie w poziomie (jak wspomniałem w odpowiedzi). Jeśli jest to „kolumna” - justify-content: center;oznacza wyrównanie w pionie.
Danield
140

Jeśli nie chcesz ustawić stałej szerokości i nie chcesz dodatkowego marginesu, dodaj display: inline-blockdo swojego elementu.

Możesz użyć:

#element {
    display: table;
    margin: 0 auto;
}
Salman von Abbas
źródło
3
te same wymagania co display: również blok wbudowany ( quirksmode.org/css/display.html )
montrealmike,
Też tego użyłem, ale nigdy wcześniej nie spotkałem display: table;. Co to robi?
Matt Cremeens
97

Centrowanie div o nieznanej wysokości i szerokości

Poziomo i pionowo. Działa z rozsądnie nowoczesnymi przeglądarkami (Firefox, Safari / WebKit, Chrome, Internet Explorer 10, Opera itp.)

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
<div class="content">This works with any content</div>

Majstruj przy tym dalej na Codepen lub na JSBin .

iamnotsam
źródło
89

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

gizmo
źródło
49
a jeśli nie znasz szerokości? Powiedz, ponieważ treść jest dynamiczna?
gman
maksymalna szerokość? Co z tym?
1
Używam width: fit-content;i margin: 0 auto. Myślę, że to może działać z nieznaną szerokością.
Rick,
89

Właściwość box-align CSS 3

#outer {
    width: 100%;
    height: 100%;
    display: box;
    box-orient: horizontal;
    box-pack: center;
    box-align: center;
}
neoneye
źródło
8
Przeczytaj najpierw tę odpowiedź, zanim zaczniesz wdrażać to rozwiązanie.
cimmanon
88

Ustaw widthi ustaw margin-lefti margin-rightna auto. Dotyczy to jednak tylko poziomu . Jeśli chcesz na dwa sposoby, po prostu zrób to na dwa sposoby. Nie bój się eksperymentować; to nie tak, że coś zepsujesz.

Sneakyness
źródło
62

Niedawno musiałem wyśrodkować „ukryty” div (tj. display:none;), Który zawierał formularz, który musiał być wyśrodkowany na stronie. Napisałem następujący kod jQuery, aby wyświetlić ukryty div, a następnie zaktualizuj zawartość CSS do automatycznie wygenerowanej szerokości tabeli i zmień margines, aby go wyśrodkować. (Przełączanie wyświetlania jest uruchamiane przez kliknięcie łącza, ale ten kod nie był konieczny do wyświetlenia).

UWAGA: Udostępniam ten kod, ponieważ Google wprowadził mnie do tego rozwiązania przepełnienia stosu i wszystko działałoby, z wyjątkiem tego, że ukryte elementy nie mają żadnej szerokości i nie można ich zmienić / wyśrodkować, dopóki nie zostaną wyświetlone.

$(function(){
  $('#inner').show().width($('#innerTable').width()).css('margin','0 auto');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="inner" style="display:none;">
  <form action="">
    <table id="innerTable">
      <tr><td>Name:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="text"></td></tr>
      <tr><td>Email:</td><td><input type="submit"></td></tr>
    </table>
  </form>
</div>

James Moberg
źródło
59

Zwykle robię to za pomocą pozycji bezwzględnej:

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

Zewnętrzny div nie potrzebuje żadnych dodatkowych właściwości, aby to zadziałało.

william44isme
źródło
Może to nie działać, jeśli masz inne div poniżej wyśrodkowanego div.
NoChance
54

W przypadku przeglądarki Firefox i Chrome:

<div style="width:100%;">
  <div style="width: 50%; margin: 0px auto;">Text</div>
</div>

W przypadku przeglądarki Internet Explorer, Firefox i Chrome:

<div style="width:100%; text-align:center;">
  <div style="width: 50%; margin: 0px auto; text-align:left;">Text</div>
</div>

Ta text-align:właściwość jest opcjonalna dla współczesnych przeglądarek, ale jest niezbędna w trybie dziwactwa przeglądarki Internet Explorer do obsługi starszych przeglądarek.

ch2o
źródło
5
Nie ma potrzeby wyrównywania tekstu. Jest to całkowicie niepotrzebne.
Touhid Rahman
wyrównanie tekstu jest w rzeczywistości konieczne, aby działało w trybie szybkich przeglądarek IE, więc jeśli nie masz nic przeciwko dodaniu małego wyrażenia do obsługi starszych przeglądarek, pozostaw je tam. (IE8 z regułami IE8 i IE7 działają zarówno bez wyrównania tekstu, więc być może dotyczy to tylko IE6 i starszych)
heytools
52

Posługiwać się:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}
<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Ankit Jain
źródło
47

Innym rozwiązaniem tego problemu bez konieczności ustawiania szerokości jednego z elementów jest użycie transformatrybutu CSS 3 .

#outer {
  position: relative;
}

#inner {
  position: absolute;
  left: 50%;

  transform: translateX(-50%);
}

Sztuczka polega na tym, że translateX(-50%)ustawia #innerelement o 50 procent na lewo od własnej szerokości. Możesz użyć tej samej sztuczki do wyrównania pionowego.

Oto skrzypce pokazujące wyrównanie w poziomie i pionie.

Więcej informacji znajduje się w sieci Mozilla Developer Network .

Kilian Stinson
źródło
2
Konieczne mogą być również prefiksy dostawcy:-webkit-transform: translate(-50%,0); -moz-transform: translate(-50%,0); -ms-transform: translate(-50%,0); -khtml-transform: translate(-50%,0); -o-transform: translate(-50%,0);
Skippy le Grand Gourou
45

Chris Coyier, który napisał na swoim blogu doskonały post na temat „Centrowania w nieznanym”. Jest to zestaw wielu rozwiązań. Opublikowałem taki, który nie został zamieszczony w tym pytaniu. Ma większą obsługę przeglądarki niż rozwiązanie Flexbox i nie używasz tego, display: table;co mogłoby popsuć inne rzeczy.

/* This parent can be any width and height */
.outer {
  text-align: center;
}

/* The ghost, nudged to maintain perfect centering */
.outer:before {
  content: '.';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
  width: 0;
  overflow: hidden;
}

/* The element to be centered, can
   also be of any width and height */
.inner {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
}
Willem de Wit
źródło
39

Ostatnio znalazłem podejście:

#outer {
    position: absolute;
    left: 50%;
}

#inner {
    position: relative;
    left: -50%;
}

Oba elementy muszą mieć tę samą szerokość, aby działać poprawnie.

BenjaminRH
źródło
Wystarczy ustawić tę regułę dla #innertylko: #inner { position:relative; left:50%; transform:translateX(-50%); }. Działa to dla dowolnej szerokości.
Jose Rui Santos
33

Na przykład zobacz ten link i fragment poniżej:

div#outer {
  height: 120px;
  background-color: red;
}

div#inner {
  width: 50%;
  height: 100%;
  background-color: green;
  margin: 0 auto;
  text-align: center; /* For text alignment to center horizontally. */
  line-height: 120px; /* For text alignment to center vertically. */
}
<div id="outer" style="width:100%;">
  <div id="inner">Foo foo</div>
</div>

Jeśli masz dużo dzieci pod rodzicem, treść CSS musi być taka jak w przykładzie na skrzypcach .

Wygląd treści HTML wygląda następująco:

<div id="outer" style="width:100%;">
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

Następnie zobacz ten przykład na skrzypcach .

Lalit Kumar
źródło
28

Centrowanie tylko poziomo

Z mojego doświadczenia wynika, że ​​najlepszym sposobem na wyśrodkowanie pudełka w poziomie jest zastosowanie następujących właściwości:

Pojemnik:

  • powinien mieć text-align: center;

Pole zawartości:

  • powinien mieć display: inline-block;

Próbny:

.container {
  width: 100%;
  height: 120px;
  background: #CCC;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="container">
  <div class="centered-content">
    Center this!
  </div>
</div>

Zobacz także to skrzypce !


Centrowanie zarówno w poziomie, jak i w pionie

Z mojego doświadczenia wynika, że ​​najlepszym sposobem na wyśrodkowanie pudełka jest jedno i drugie wynika pionie, i poziomie jest użycie dodatkowego pojemnika i zastosowanie następujących właściwości:

Zewnętrzny pojemnik:

  • powinien mieć display: table;

Wewnętrzny pojemnik:

  • powinien mieć display: table-cell;
  • powinien mieć vertical-align: middle;
  • powinien mieć text-align: center;

Pole zawartości:

  • powinien mieć display: inline-block;

Próbny:

.outer-container {
  display: table;
  width: 100%;
  height: 120px;
  background: #CCC;
}

.inner-container {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.centered-content {
  display: inline-block;
  background: #FFF;
  padding: 20px;
  border: 1px solid #000;
}
<div class="outer-container">
  <div class="inner-container">
    <div class="centered-content">
      Center this!
    </div>
  </div>
</div>

Zobacz także to skrzypce !

John Slegers
źródło
27

Najłatwiejszy sposób:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}
<div id="outer">
  <div id="inner">Blabla</div>
</div>

joan16v
źródło
1
Jak zauważa skrzypce, #inner musi mieć ustawioną szerokość.
Michael Terry,
#outernie potrzebuje żadnych, width:100%;jak <div>zawsze domyślnie width:100%. i nie text-align:centerjest wcale konieczne.
Mobarak Ali
27

Jeśli szerokość treści jest nieznana, możesz użyć następującej metody . Załóżmy, że mamy te dwa elementy:

  • .outer -- pełna szerokość
  • .inner - brak ustawionej szerokości (ale można określić maksymalną szerokość)

Załóżmy, że obliczona szerokość elementów wynosi odpowiednio 1000 pikseli i 300 pikseli. Postępować w następujący sposób:

  1. Owinąć .inner środku.center-helper
  2. Zrób .center-helperblok wbudowany; staje się tego samego rozmiaru co.inner co szerokość 300 pikseli.
  3. Pchać .center-helper 50% w prawo w stosunku do jego rodzica; to pozostawia lewą stronę na 500 pikseli wrt. zewnętrzny.
  4. Pchać .inner 50% w lewo względem jego rodzica; to umieszcza lewą stronę na -150 pikseli wrt. środkowy pomocnik, co oznacza, że ​​jego lewa strona ma 500 - 150 = 350 pikseli wrt. zewnętrzny.
  5. Ustaw przepełnienie na .outerukryte, aby zapobiec poziomemu paskowi przewijania.

Próbny:

body {
  font: medium sans-serif;
}

.outer {
  overflow: hidden;
  background-color: papayawhip;
}

.center-helper {
  display: inline-block;
  position: relative;
  left: 50%;
  background-color: burlywood;
}

.inner {
  display: inline-block;
  position: relative;
  left: -50%;
  background-color: wheat;
}
<div class="outer">
  <div class="center-helper">
    <div class="inner">
      <h1>A div with no defined width</h1>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>
          Duis condimentum sem non turpis consectetur blandit.<br>
          Donec dictum risus id orci ornare tempor.<br>
          Proin pharetra augue a lorem elementum molestie.<br>
          Nunc nec justo sit amet nisi tempor viverra sit amet a ipsum.</p>
    </div>
  </div>
</div>

Salman A.
źródło
26

Możesz zrobić coś takiego

#container {
   display: table;
   width: <width of your container>;
   height: <height of your container>;
}

#inner {
   width: <width of your center div>;
   display: table-cell;
   margin: 0 auto;
   text-align: center;
   vertical-align: middle;
}

Spowoduje to również wyrównanie w #innerpionie. Jeśli nie chcesz, usuń właściwości displayi vertical-align;

Kenneth Palaganas
źródło
25

Oto, co chcesz w najkrótszy sposób.

JSFIDDLE

#outer {
    margin - top: 100 px;
    height: 500 px; /* you can set whatever you want */
    border: 1 px solid# ccc;
}

#inner {
    border: 1 px solid# f00;
    position: relative;
    top: 50 % ;
    transform: translateY(-50 % );
}
caniz
źródło
3
To wyśrodkowuje go w pionie.
Michael Terry,
22

Wyrównanie tekstu: środek

Stosowanie text-align: centertreści śródliniowej jest wyśrodkowane w polu liniowym. Ponieważ jednak wewnętrzny div ma domyślnie width: 100%, musisz ustawić określoną szerokość lub użyć jednego z poniższych:


Margines: 0 auto

Używanie margin: 0 autoto kolejna opcja i jest bardziej odpowiednia dla starszych przeglądarek. Działa razem z display: table.


Flexbox

display: flexzachowuje się jak element blokowy i określa jego zawartość zgodnie z modelem flexbox. Działa z justify-content: center.

Uwaga: Flexbox jest kompatybilny z większością przeglądarek, ale nie ze wszystkimi. Zobacz tutaj pełną i aktualną listę kompatybilności przeglądarek.


Przekształcać

transform: translatepozwala modyfikować przestrzeń współrzędnych modelu formatowania wizualnego CSS. Za jego pomocą elementy mogą być tłumaczone, obracane, skalowane i pochylane. Do wyśrodkowania w poziomie wymaga position: absolutei left: 50%.


<center> (Przestarzałe)

Tag <center>jest alternatywą HTML dla text-align: center. Działa na starszych przeglądarkach i na większości nowych, ale nie jest uważane za dobrą praktykę, ponieważ ta funkcja jest przestarzała i została usunięta ze standardów sieciowych.

Paolo Forgia
źródło
22

Możesz użyć display: flexdla zewnętrznego div i aby wyśrodkować w poziomie, musisz dodaćjustify-content: center

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

lub możesz odwiedzić w3schools - CSS Flex Property, aby uzyskać więcej pomysłów.

Milan Panigrahi
źródło
21

Flex ma ponad 97% obsługi przeglądarek i może być najlepszym sposobem rozwiązania tego rodzaju problemów w kilku liniach:

#outer {
  display: flex;
  justify-content: center;
}
Sandesh Damkondwar
źródło
21

Udało mi się znaleźć rozwiązanie, które może pasować do wszystkich sytuacji, ale używa JavaScript:

Oto struktura:

<div class="container">
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
  <div class="content">Your content goes here!</div>
</div>

A oto fragment kodu JavaScript:

$(document).ready(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});

Jeśli chcesz używać go w sposób responsywny, możesz dodać następujące elementy:

$(window).resize(function() {
  $('.container .content').each( function() {
    container = $(this).closest('.container');
    content = $(this);

    containerHeight = container.height();
    contentHeight = content.height();

    margin = (containerHeight - contentHeight) / 2;
    content.css('margin-top', margin);
  })
});
Miguel Leite
źródło
21

Ta metoda działa również dobrze:

div.container {
   display: flex;
   justify-content: center; /* For horizontal alignment */
   align-items: center;     /* For vertical alignment   */
}

Jeśli chodzi o wnętrze <div>, jedynym warunkiem jest to, że jego heighti widthnie może być większy niż te z jego pojemnika.

Billal Begueradj
źródło
19

Istnieje jedna opcja, którą znalazłem:

Wszyscy mówią, aby użyć:

margin: auto 0;

Ale jest inna opcja. Ustaw tę właściwość dla rodzica div. Działa idealnie w każdej chwili:

text-align: center;

I zobacz, dziecko idzie do centrum.

I wreszcie CSS dla Ciebie:

#outer{
     text-align: center;
     display: block; /* Or inline-block - base on your need */
}

#inner
{
     position: relative;
     margin: 0 auto; /* It is good to be */
}
Pnsadeghy
źródło
wyrównywanie tekstu dla wyrównywania tekstu w kontenerze, a nie dla kontenera względem jego rodzica.
Lalit Kumar Maurya,
testuję to, mam problem z ustawieniem dziecka na środek, muszę, gdy masz więcej jednego dziecka, więcej marginesów czasu: 0 automatyczna odpowiedź na czcionkę, ale, wyśrodkuj tekst, dla rodzica spraw, aby to dziecko było na środku, nawet jeśli są elementem i nie bądź tekstem, sprawdź i zobacz, co się stanie
Pnsadeghy
wyrównaj tekst tylko środkowy tekst. Masz rację w tej chwili, ale kiedy piszesz kontener css, który zawiera dziecko o innej szerokości i kolorze, twój kod nie działa. Sprawdź to jeszcze raz !!!!
Lalit Kumar Maurya,
Zobacz ten przykład jsfiddle.net/uCdPK/2 i powiedz mi, co o tym sądzisz !!!!!
Lalit Kumar Maurya,