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?

css css-position center absolute 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

źródło

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

Jak wyśrodkować absolutnie pozycjonowany element w div?

Odpowiedzi:

Elastyczne rozwiązanie