Jak wyśrodkować absolutnie pozycjonowany element w div?

1078

Muszę umieścić element div(z position:absolute;) na środku mojego okna. Mam jednak problemy, ponieważ szerokość jest nieznana .

Próbowałem tego. Ale należy go dostosować, ponieważ szerokość reaguje.

.center {
  left: 50%;
  bottom:5px;
}

Jakieś pomysły?

— Ish
źródło

4

W przykładach absolutnych znajduje się przykład, który można uogólnić w różnych sytuacjach.

— Mihai8

2

Lepszą odpowiedź na to pytanie można znaleźć na stronie stackoverflow.com/questions/17976995/…

— Andrew Swift,

1333

<body>
  <div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
      I am some centered shrink-to-fit content! <br />
      tum te tum
    </div>
  </div>
</body>

Rozwiń fragment kodu

— Bobin
źródło

76

Niesamowite. Pracował dla mnie! Miałem jeden problem: obraz, który centrowałem, był dość duży, co spowodowało, że div div wyszedł poza prawą krawędź strony i spowodował przewijanie w poziomie. Zamieniłem właściwość „left” css na „right” i do tej pory działa lepiej, ponieważ przekroczenie lewej krawędzi ekranu nie powoduje przewijania

— BoomShaka,

co jeśli użytkownik przewinął stronę w dół, u góry pojawi się overylay, czy uważasz, że dobrym pomysłem będzie skorzystanie z jquery do rozwiązania problemu z przewijaniem

— PUG

1

jednym rozwiązaniem problemu przewijania może być, position: fixedale co jeśli wysokość nie jest znana z nakładki, należy wprowadzić paski przewijania dla nakładki

— PUG

3

Podczas korzystania z tej techniki napotkałem niewielki problem. Ponieważ zewnętrzny div zajmuje 50% ekranu, pewne przesunięcia występują, gdy tekst jest szerszy niż 50% rozmiaru ekranu. Rozwiązałem ten problem, ustawiając div div na „width: 100%” i usuwając właściwość left. W przypadku wewnętrznego div po prostu ustawiłem wyrównanie tekstu na środku. To rozwiązuje problem.

— Nicky L.,

3

Wysokość procentowa jest w tym przypadku względem bloku zawierającego <html>. Ale <html>element nie ma heightokreślonego, więc przyjmuje wysokość całej zawartości dokumentu, co jest niczym, ponieważ jedyna zawartość jest pozycjonowana bezwzględnie (usuwana z przepływu treści). Dodanie height: 100%do <html>elementu robi różnicę.

— bobince

1801

To działa dla mnie:

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Rozwiń fragment kodu

— Matthias Weiler
źródło

36

Chcę tylko przejść przez to, że ujemne marginesy są całkowicie poprawnym CSS i nie powinny być postrzegane jako „brudny hack”. Ujemne marginesy są wymienione w specyfikacji modelu skrzynki W3C. Niektóre osoby wydają się arbitralnie decydować, że jest to hack, ponieważ a) są dla nich nieświadome lub b) używają ich do naprawy złego CSS.

— Joseph Ravenwolfe

58

szerokość div, która ma być wyśrodkowana, musi być ustawiona - nie będzie działać automatycznie z, powiedzmy, przyciskiem z tekstem.

— Stefan

2

@Joshua To wyśrodkuje się tylko w poziomie, a nie w pionie, jak druga odpowiedź.

— ygoe

3

Wolę to rozwiązanie, ponieważ nie zwiększa rozmiaru rzutni.

— iceydee

13

Do obsługi w różnych przeglądarkach: widthnależy ustawić na określoną wartość, aby działało. autoi 100%nie będzie centrować elementu. display: block;jest koniecznością. position: absolute;NIE jest koniecznością. Wszystkie wartości będą działać. Element macierzysty positionpowinien być ustawiony na coś innego niż static. Ustawienie lefti rightdo 0jest niepotrzebne. margin-left: auto; margin-right: auto;wykona pracę.

— Onur Yıldırım

767

Elastyczne rozwiązanie

Oto dobre rozwiązanie dla responsywnego projektu lub ogólnie nieznanych wymiarów, jeśli nie potrzebujesz obsługiwać IE8 i niższych wersji.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Pokaż fragment kodu

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

Rozwiń fragment kodu

Oto skrzypce JS

Wskazówką jest, że left: 50%jest to relacja względem rodzica, podczas gdy translatetransformacja jest relatywna do szerokości / wysokości elementów.

W ten sposób masz idealnie wyśrodkowany element o elastycznej szerokości zarówno dla dziecka, jak i rodzica. Bonus: działa, nawet jeśli dziecko jest większe niż rodzic.

Możesz również wyśrodkować go w pionie (i ponownie, szerokość i wysokość rodzica i dziecka mogą być całkowicie elastyczne (i / lub nieznane)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Pamiętaj, że może być także potrzebny transformprefiks dostawcy. Na przykład-webkit-transform: translate(-50%,-50%);

— ProblemsOfSumit
źródło

26

Ponieważ obsługa IE7 nie jest już potrzebna, powinno to być de facto rozwiązanie. To rozwiązanie jest lepsze niż technika lewy: 0 / prawy: 0, ponieważ powoduje to, że elementy mają pełną szerokość, podczas gdy zachowuje szerokość i działa na elementach o nieznanej szerokości.

— aleemb

51

Zdecydowanie najlepsza odpowiedź, to działa, jeśli pudełko, w którym znajduje się div, jest mniejsze niż dziecko.

— Sprawa

2

@ChadJohnson, oczywiście, że tak. Spróbuj z webkit-prefiksem, jak zasugerowałem.

— ProblemsOfSumit

2

Ach, przegapiłem twoją notatkę o -webkit. Niesamowite.

— Chad Johnson,

3

transform: translatewydaje się być position: fixedniezdatny do użytku u dzieci. Akceptowana odpowiedź działa lepiej w tym przypadku.

— dmvianna

49

Naprawdę fajny post .. Chciałem tylko dodać, jeśli ktoś chce to zrobić za pomocą pojedynczego tagu div, a następnie wyjście:

Biorąc widthjako 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

W takim przypadku należy wiedzieć widthwcześniej.

— pratikabu
źródło

26

"because the width is unknown"... to nie odpowiada na pytanie

— Michel Ayres

15

cześć @Michel faktycznie, kiedy wyszukujesz w Google coś związanego z centrowaniem absolutnego div, ten link pojawia się jako pierwszy link. Właśnie dlatego dodałem to rozwiązanie, na wypadek gdyby ktoś taki jak ja szukał powyższego rozwiązania .. :)

— pratikabu

1

Niezbyt przydatne do responsywnego projektowania, ale działało to dla mnie, dopóki nie zacząłem tworzyć responsywnych projektów. To poprawna odpowiedź na centrowanie absolutnie pozycjonowanych elementów o znanej szerokości .

— Sean Kendle

35

Absolutne centrum

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Demo: http://jsbin.com/rexuk/2/

Testowane w Google Chrome, Firefox i IE8

Mam nadzieję że to pomoże :)

— Ijas Ameenudeen
źródło

To nie działa, sprawdź następujące codepen codepen.io/anon/pen/YqWxjJ

— Mark

1

Przepraszam, myślę, że to zadziała, ale musisz podać stałą wysokość i szerokość codepen.io/anon/pen/WwxEYQ

— Mark

31

ta praca dla pionowego i poziomego

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

a jeśli chcesz ustawić element na środek rodzica, ustaw pozycję rodzica względnego

 #parentElement{
      position:relative
  }

edytować:

aby wyśrodkować środek, wyrównaj wysokość do swojego elementu. dzięki @Raul
jeśli chcesz ustawić element na środek rodzica, ustaw pozycję rodzica na względną

— Mohsen Abdollahi
źródło

2

Myślę, że musisz dodać wysokość, aby pionowa działała.

— Raul

Wygląda na to, że ta pozycja znajduje się na środku strony, a nie na środku innego elementu.

— Günter Zöchbauer

1

@ GünterZöchbauer tak, jeśli chcesz ustawić element na środek rodzica, ustaw pozycję względną rodzica.

— Mohsen Abdollahi,

20

W poszukiwaniu rozwiązania otrzymałem odpowiedzi powyżej i mogłem skoncentrować treść na odpowiedzi Matthiasa Weilera, ale stosując wyrównywanie tekstu.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Pracował z Chrome i Firefox.

— Cavila
źródło

5

Myślę, że nie potrzebujesz „wyrównywania tekstu: wyśrodkuj”

— Tobias

To naprawiło mój problem tutaj . Dzięki!

— Volomike

Potrzebowałem „text-align: center” i działało to tam, gdzie rozwiązanie sugerowane przez @ProblemsOfSumit nie działało, ponieważ spowodowało zawijanie tekstu.

— Nat

19

Jeśli chcesz wyśrodkować także poziomo i pionowo:

left: 50%;
top: 50%;
transform: translate(-50%, -50%);

— michal.jakubeczy
źródło

bardzo fajne dzięki dzięki

— Stanley Bateswar

14

** ODPOWIEDNIE ROZWIĄZANIE **

Zakładając, że element w div, jest kolejnym div ...

to rozwiązanie działa dobrze

<div class="container">
  <div class="center"></div>
</div>

pojemnik może być dowolnej wielkości (musi być położenie względne)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

Element ( div ) może mieć również dowolny rozmiar (musi być mniejszy niż pojemnik )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

Wynik będzie wyglądał następująco. Uruchom fragment kodu

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

<div class="container">
	<div class="center"></div>
</div>

Rozwiń fragment kodu

Uważam, że to bardzo pomocne

— RealMJDev
źródło

1

geniusz. dlaczego ten drugi nie wymyślił tego.

— mesqueeb

Dziękuję, szczęśliwego kodowania

— RealMJDev

13

Oto mieszanka innych odpowiedzi, które działały dla nas:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

— Crashalot
źródło

Niezła poprawka, stary!

— Stanley Bateswar

12

Rozumiem, że to pytanie ma już kilka odpowiedzi, ale nigdy nie znalazłem rozwiązania, które zadziałałoby w prawie wszystkich klasach, które ma sens i jest eleganckie, więc oto moje zdanie po poprawieniu kilku:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

Rozwiń fragment kodu

To oznacza, że daj mi top: 50%a left: 50%, a następnie przekształć (utwórz przestrzeń) na osi X / Y do-50% wartości, w pewnym sensie „stwórz przestrzeń lustrzaną”.

Jako taki, tworzy to równe miejsce na wszystkich 4 punktach div, które zawsze są pudełkiem (ma 4 boki).

Spowoduje to:

Pracuj bez znajomości wysokości / szerokości rodzica.
Pracuj nad responsywnym.
Pracuj na osi X lub Y. Lub oba, jak w moim przykładzie.
Nie mogę wymyślić sytuacji, w której to nie działa.

— Daniel Moss
źródło

Daj mi znać, jeśli znajdziesz sytuację, w której to nie zadziała, abym mógł edytować pytanie na podstawie twoich danych wejściowych.

— Daniel Moss,

przekształcanie / tłumaczenie powoduje, że safari powoduje, że tekst jest zamazany na określoną skalę

— James Tan

@DanielMoss jakiś powód, aby nie używać translate(-50%,-50%);?

— Mark Baijens,

12

Działa na dowolnej losowej nieznanej szerokości elementu pozycjonowanego absolutnie, który chcesz mieć w środku elementu kontenera.

Próbny

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

— lowtechsun
źródło

9

Flex może być użyty do wyśrodkowania div pozycjonowanego absolutnie.

display:flex;
align-items:center;
justify-content:center;

Pokaż fragment kodu

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

Rozwiń fragment kodu

— Dhaval Jardosh
źródło

na moim ekranie - Firefox 68.x, po prostu się nie wyrównuje, blok absolutny pojawia się na dole względnego bloku

— Webwoman

Czy możesz tego spróbować display: -webkit-flex;?

— Dhaval Jardosh

7

O ile mi wiadomo, nie można tego osiągnąć dla nieznanej szerokości.

Mógłbyś - jeśli to działa w twoim scenariuszu - absolutnie ustawić niewidoczny element o 100% szerokości i wysokości, i ustawić element w środku za pomocą marginesu: auto i ewentualnie wyrównanie w pionie. W przeciwnym razie będziesz potrzebować Javascript.

— Pekka
źródło

+1 za rzecz „margin: auto”. Próbowałem już wcześniej, aby poziomo wyśrodkować div za pomocą linii „margines: 0 auto” - „0” dotyczy marginesów pionowych i „auto” poziomo. Myślę, że właśnie tego używa StackOverflow dla div najwyższego poziomu, aby uzyskać 2 grube białe obramowania wzdłuż boków strony. Jednak strona W3Schools na marginesie CSS podaje wartość auto, że „Wynik tego zależy od przeglądarki” - osobiście nie próbowałem tego w wielu różnych przeglądarkach, więc nie mogę tak naprawdę komentować tego punktu (ale w niektórych z nich to oczywiście rozwiązuje)

— Steg

1

możliwe jest podanie nieznanej szerokości (i wysokości), jeśli IE8 nie stanowi problemu. Zobacz moją odpowiedź, aby poznać szczegóły.

— ProblemsOfSumit

7

Chciałbym dodać do odpowiedzi @ bobince:

<body>
    <div style="position: absolute; left: 50%;">
        <div style="position: relative; left: -50%; border: dotted red 1px;">
            I am some centered shrink-to-fit content! <br />
            tum te tum
        </div>
    </div>
</body>

Ulepszony: /// sprawia, że poziomy pasek przewijania nie pojawia się przy dużych elementach w wyśrodkowanym div.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; left: 50%;">
            <div style="position: relative; left: -50%; border: dotted red 1px;">
                I am some centered shrink-to-fit content! <br />
                tum te tum
            </div>
        </div>
    </div>
</body>

— Fiolka
źródło

6

Oto przydatna wtyczka jQuery do zrobienia tego. Znaleziono tutaj . Nie sądzę, że jest to możliwe wyłącznie dzięki CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— Ben Shelock
źródło

jest to lepszy sposób, zwłaszcza przy powtarzalnym projekcie.

— m4tm4t

Byłoby trywialne, gdyby jQuery był używany w każdym przypadku

— Code Whisperer

8

to NIE jest lepszy sposób. Zawsze lepiej jest używać CSS, gdy tylko jest to możliwe. Centrowanie DIV jest możliwe dzięki CSS na każdej osi, a także dla responsywnych stron. JavaScript nie jest potrzebny!

— ProblemsOfSumit

1

@yckart, w tym przypadku narzędziem jest CSS.

— ProblemsOfSumit

5

sass / kompas wersja Responsive Solution powyżej:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— Adam Spence
źródło

4

transform: translate(-50%, -50%)sprawia, że tekst i wszystkie inne treści są rozmyte w systemie OS X za pomocą przeglądarek internetowych. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— Yasha

Po prostu zastosuj rodzaj antyaliasingu, który Ci się podoba. -webkit-font-smoothing: antialiased;Zebrałem go z artykułu opublikowanego przez btw!

— Adam Spence

4

Moja preferowana metoda centrowania:

position: absolute;
margin: auto;
width: x%

absolutne pozycjonowanie elementu bloku
margines auto
to samo lewo / prawo, góra / dół

JSFiddle tutaj

— vp_arth
źródło

4

To działało dla mnie:

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— Alan
źródło

To odpowiedź @Matthias Weiler 5 lat później.

— aloisdg przechodzi na codidact.com,

3

Wiem, że już dostałem odpowiedź, a moja poprzednia odpowiedź, wraz z innymi podanymi, działa dobrze. Ale korzystałem z tego w przeszłości i działa lepiej w niektórych przeglądarkach i w niektórych sytuacjach. Pomyślałem więc, że również dam tę odpowiedź. Nie „edytowałem” mojej poprzedniej odpowiedzi i nie dodałem jej, ponieważ uważam, że jest to całkowicie osobna odpowiedź, a dwie podane przeze mnie odpowiedzi nie są powiązane.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— Dustin Poissant
źródło

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— Burcu AKCAOGLU
źródło

2

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— Dustin Poissant
źródło

2

To rozwiązanie działa, jeśli element ma widthiheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

Rozwiń fragment kodu

— Mo.
źródło

2

rozwiązanie tego pytania nie zadziałało w moim przypadku. Robię podpisy dla niektórych zdjęć i rozwiązałem to za pomocą

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

Rozwiń fragment kodu

— Marcogomesr
źródło

1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

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

    width: 100px;
    height: 100px;

    background: #ccc;
}

Ten i więcej przykładów tutaj

1

To jest sztuczka, którą wymyśliłem, żeby DIV unosił się dokładnie na środku strony. Oczywiście bardzo brzydka, ale działa we wszystkich

Kropki i kreski

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Odkurzacz

Wow, że minęło pięć lat, prawda?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— Pan B.
źródło

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

— AndreyP
źródło

0

Możesz umieścić obraz w div i dodać identyfikator div i mieć CSS dla tego diva text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

— Dworvin Vonstrangle
źródło

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

Rozwiń fragment kodu

— amit bende
źródło

0

Proste podejście, które pomogło mi wyśrodkować poziomo blok o nieznanej szerokości:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Do zestawu reguł #block można dodać właściwość wyrównania tekstu, aby wyrównać jej zawartość niezależnie od wyrównania bloku.

Działa to w najnowszych wersjach Firefox, Chrome, IE, Edge i Safari.

— Terence Bandoian
źródło