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ętrzny div staje się elementem inline, który może być wyśrodkowany przez text-align.

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%;
}

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

Zgodnie z Twoją użytecznością możesz również korzystać z właściwości box-orient, box-flex, box-direction.

Flex :

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

Czytaj więcej o centrowaniu elementów potomnych

• Link 2

• Link 3

• Link 4

I to wyjaśnia, dlaczego Model box jest najlepszy podejście :

• dlaczego model W3C box uważany jest za lepszy?

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

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

Upewnij się, że element nadrzędny jest umieszczony, tj. względny, stały, absolutny lub sticky.

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ść element w środku i / align = "left" /

Stworzyłem Ten przykład , aby pokazać, jak w pionie i w poziomie 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 w center, nawet gdy zmienisz rozmiar ekranu.

Niektóre plakaty wspominały o sposobie CSS 3 do centrum za pomocą display:box.

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

Tak dla kompletności tutaj jest najnowszy sposób na centrum w CSS 3 za pomocą elastyczny moduł układania pudełek.

Więc jeśli masz proste znaczniki typu:

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

...jeśli chcesz wyśrodkować swoje elementy w polu, oto, czego potrzebujesz na elemencie nadrzędnym (.pole): {]}

.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ługiwać starsze przeglądarki, które używają starszej składni dla flexbox oto dobre miejsce do szukania.

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

Możesz użyć:

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

Centrowanie div o nieznanej wysokości i szerokości

Poziomo i pionowo. Współpracuje z dość 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>

Majsterkuj z nim dalej na Codepen lub na JSBin .

Ustaw width i ustaw margin-left i margin-right na auto. To jest tylko dla. Jeśli chcesz w obie strony, po prostu zrób to w obie strony. Nie bój się eksperymentować, to nie jest tak, że złamiesz cokolwiek.

Nie może być wyśrodkowany, jeśli nie nadasz mu szerokości. W przeciwnym razie zajmie to domyślnie całą poziomą przestrzeń.

CSS 3 ' s box-align property

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

Ostatnio musiałem wyśrodkować "Ukryty" div (tj. display:none;), który miał w sobie złożony formularz, który musiał być wyśrodkowany na stronie. Napisałem następujący kod jQuery, aby wyświetlić ukryty div, a następnie zaktualizować zawartość CSS do automatycznie generowanej szerokości tabeli I zmienić margines, aby go wyśrodkować. (Przełącznik wyświetlania jest uruchamiany po kliknięciu na link, ale ten kod nie był konieczny do wyświetlenia.)

Uwaga: dzielę się tym kodem, ponieważ Google sprowadziło mnie na ten stos Rozwiązanie Overflow i wszystko by działało, z wyjątkiem tego, że ukryte elementy nie mają żadnej szerokości i nie można ich zmienić rozmiaru/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>

Sposób, w jaki zwykle to robię, to używanie pozycji absolutnej:

#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 działało.

Dla Firefoksa i Chrome:

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

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

Właściwość text-align: jest opcjonalna dla nowoczesnych przeglądarek, ale jest konieczna w trybie Internet Explorer Quirks dla obsługi starszych przeglądarek.

Użycie:

#outerDiv {
  width: 500px;
}

#innerDiv {
  width: 200px;
  margin: 0 auto;
}

<div id="outerDiv">
  <div id="innerDiv">Inner Content</div>
</div>

Innym rozwiązaniem bez konieczności ustawiania szerokości dla jednego z elementów jest użycie atrybutu CSS 3 transform.

#outer {
  position: relative;
}

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

  transform: translateX(-50%);
}

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

Oto Fiddle wyświetlanie poziomego i pionowego wyrównania.

Chris Coyier, który napisał doskonały post na "Centering in the Unknown" na swoim blogu. To podsumowanie wielu rozwiązań. Zamieściłem jeden, który nie jest zamieszczony w tym pytaniu. Ma większą obsługę przeglądarki niż rozwiązanie Flexbox i nie używasz display: table;, które mogłoby zepsuć 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;
}

Ostatnio znalazłem podejście:

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

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

Oba elementy muszą być tej samej szerokości, aby poprawnie funkcjonować.

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, więc zawartość CSS musi być taka przykład na fiddle .

Zawartość HTML wygląda tak:

<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>

Zobacz ten przykład na fiddle .

Centrowanie tylko poziomo

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

Pojemnik:

• powinien mieć text-align: center;

Pole zawartości:

• powinien mieć display: inline-block;

Demo:

.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 this Fiddle!

Centrowanie zarówno poziomo jak i pionowo

Z mojego doświadczenia wynika, że najlepszym sposobem wyśrodkowania pudełka zarówno pionowo jak i poziomo 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;

Demo:

.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 this Fiddle!

Najprostszy sposób:

#outer {
  width: 100%;
  text-align: center;
}
#inner {
  margin: auto;
  width: 200px;
}

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

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

• .outer -- pełna szerokość
• .inner -- no width set (but a max-width could be specified)

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

1. Wrap .inner inside .center-helper
2. Make .center-helper inline block; staje się taki sam rozmiar jak .inner co czyni go 300 piksele szerokie.
3. Przesuń .center-helper o 50% w prawo w stosunku do swojego rodzica; to ustawia jego lewo na 500 pikseli wrt. Na Zewnątrz.
4. Przesuń .inner o 50% w lewo w stosunku do jego rodzica; to ustawia jego lewo na -150 pikseli wrt. Środkowy pomocnik, co oznacza, że jego lewa strona jest na 500-150 = 350 pikseli wrt. Na Zewnątrz.
5. Ustaw przepełnienie na .outer na Ukryte, aby zapobiec poziomemu pasku przewijania.

Demo:

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>

Text-align: center

Zastosowanie text-align: center zawartość w wierszu jest wyśrodkowana w polu wiersz. Jednak ponieważ wewnętrzny div ma domyślnie width: 100%, musisz ustawić określoną szerokość lub użyć jednej z następujących opcji:

• display: block
• display: inline
• display: inline-block

#inner {
  display: inline-block;
}

#outer {
  text-align: center;
}

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

Margin: 0 auto

Za pomocą margin: 0 auto jest inną opcją i jest bardziej odpowiednia dla kompatybilności starszych przeglądarek. Współpracuje z display: table.

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

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

Flexbox

display: flex zachowuje się jak element blokowy i rozkłada jego zawartość zgodnie z modelem flexbox. Współpracuje z justify-content: center.

Uwaga: Flexbox jest kompatybilny z większością przeglądarek, ale nie wszystkie. Zobacz display: flex nie działa na Internet Explorer , aby uzyskać pełną i aktualną listę zgodności przeglądarek.

#inner {
  display: inline-block;
}

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

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

Transformacja

transform: translate umożliwia modyfikację przestrzeni współrzędnych modelu formatowania wizualnego CSS. Za jego pomocą elementy mogą być tłumaczone, obracane, skalowane i przekrzywiane. Aby wyśrodkować poziomo, wymaga position: absolute oraz left: 50%.

#inner {
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0%);
}

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

<center> (Deprecated)

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

#inner {
  display: inline-block;
}

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

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;
}

To również wyrównuje #inner w pionie. Jeśli nie chcesz, Usuń właściwości display i vertical-align;

Oto, czego 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 % );
}

Flex obsługuje ponad 97% przeglądarek i może być najlepszym sposobem na rozwiązanie tego typu problemów w kilku wierszach:

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

Możesz użyć display: flex do zewnętrznego div I aby wyśrodkować poziomo 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.

Ta metoda działa również dobrze:

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

Dla wewnętrznego <div> jedynym warunkiem jest to, że jego height i width nie mogą być większe niż jego Pojemnik.

Cóż, 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 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żyć go w podejściu responsywnym, możesz dodać:

$(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);
  })
});

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

Wszyscy mówią, żeby używać:

margin: auto 0;

text-align: center;

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 */
}