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?


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,

Odpowiedzi:


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>


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>


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

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


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.


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


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ą


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.


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


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>

Uważam, że to bardzo pomocne


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

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>

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:

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

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

9

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

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


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.


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

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

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

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


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

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

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


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>


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>


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>


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

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

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


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.

Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.