Wyśrodkuj pozycję: element stały

439

Chciałbym zrobić position: fixed;wyskakujące okienko wyśrodkowane na ekranie o dynamicznej szerokości i wysokości. Użyłem margin: 5% auto;do tego. Bez position: fixed;niego wyśrodkuje się poziomo, ale nie pionowo. Po dodaniu position: fixed;nawet nie wyśrodkowuje się w poziomie.

Oto kompletny zestaw:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}

<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>

Rozwiń fragment kodu

Jak wyśrodkować to pole na ekranie za pomocą CSS?

css css-position centering

— saturngod
źródło

606

Zasadniczo trzeba ustawić topi leftdo 50%centrum na lewym górnym rogu div. Musisz także ustawić margin-topimargin-left na ujemną połowę wysokości i szerokości div, aby przesunąć środek w kierunku środka div.

Zatem, pod warunkiem <!DOCTYPE html>(tryb standardów), powinno to zrobić:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Lub, jeśli nie dbają o centrowanie w pionie i starych przeglądarek takich jak IE6 / 7, a następnie można zamiast dodawać left: 0i right: 0do elementu mającego margin-lefti margin-rightod autotak, że stałe umieszczony element posiadający stałą szerokość wie, gdzie jego lewej i zaczynają się odpowiednie przesunięcia. W twoim przypadku zatem:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Ponownie działa to tylko w IE8 +, jeśli zależy Ci na IE, a to wyśrodkowuje tylko poziomo, a nie pionowo.

— BalusC
źródło

8

Znalazłem tę sztuczkę w css-tricks.com/… . Ale kiedy zmieniam szerokość i wysokość, nie porusza się w środku. Tak, powinienem zmienić margines lewy i górny, kiedy zmieniam wysokość i szerokość.

— saturngod

2

Do twojej wiadomości: to poprawnie ustawi pozycje na środku, ale niestety zgubisz paski przewijania - jakakolwiek zawartość odcięta przez rzutnię nie będzie osiągalna, nawet jeśli przewiniesz, ponieważ ustalona pozycja jest oparta na rzutni, a nie na strona. Jak dotąd jedynym rozwiązaniem, jakie znalazłem, jest javascript.

— Groxx

3

Groxx Myślę, że można wstawić paski przewijania wewnątrz div w wyskakującym oknie za pomocą właściwości overflow .

— David Winiecki

1

Poza tym w tym przypadku musisz znać szerokość elementu.

— Hector Ordonez

2

ah. nm, jeśli tak jest, to znaczy, że rozmiar przeglądarki będzie dynamiczny, nie jestem pewien, dlaczego tak było w pytaniu. zamiast tego myślałem, że miał na myśli, że wymiary wyskakujących okien muszą być dynamiczne. tak jest w moim przypadku, więc używam transformacji: tłumacz (-50%, -50%); działa świetnie, z wyjątkiem nie na IE8.

— noce

324

Chcę zrobić wyskakujące okienko wyśrodkowane na ekranie o dynamicznej szerokości i wysokości.

Oto nowoczesne podejście do poziomego centrowania elementu o dynamicznej szerokości - działa we wszystkich nowoczesnych przeglądarkach; wsparcie można zobaczyć tutaj .

Zaktualizowany przykład

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Do wyśrodkowania zarówno w pionie, jak i w poziomie można użyć:

Zaktualizowany przykład

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Możesz także dodać więcej właściwości z prefiksem dostawcy (patrz przykłady).

— Josh Crozier
źródło

1

Używam tego podejścia do poziomego wyśrodkowania obrazu o stałej pozycji, którego szerokość jest większa niż szerokość okna, i działa dobrze co najmniej w aktualnych wersjach Firefox, Chrome, IE 11 i Edge.

— jelhan

1

W moich testach działa to bardzo dobrze (za prefiksami), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome i Safari, Android 4.4+ Chrome. Jedyną porażką był dla mnie Android 4.0, w którym tłumaczenie nie nastąpiło.

— danjah

2

@ahnbizcad, działa to w przeglądarkach komputerowych, takich jak Chrome 61, Safari 11 i FireFox 65, ale nie w Chrome 61 na Androidzie 6, zaakceptowana odpowiedź działa we wszystkich przeglądarkach.

— Erik Barke

5

To powoduje rozmycie zdjęć w Chrome.

— Tomasz P. Szynalski

1

Jakoś tylko podejście, które działało poprawnie we wszystkich przeglądarkach z moim img. Wielkie dzięki!

— Kugelfisch

136

Lub po prostu dodaj left: 0i right: 0do oryginalnego CSS, który sprawia, że zachowuje się podobnie do zwykłego nieokreślonego elementu i działa zwykła technika automatycznego marginesu:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Uwaga: musisz użyć poprawnego (X) HTML DOCTYPE, aby działał poprawnie w IE (co oczywiście powinieneś mieć ...!)

— Will Prescott
źródło

2

W jakim sensie? Element macierzysty to element body, który nie ma granic. Jeśli dodałeś do ciała właściwości obramowania (?!), To na pewno będzie to miało wpływ, podobnie jak wyobrażam sobie 50% technikę. Zapewniam cię, że działa dobrze z podanymi parametrami, właśnie zweryfikowanymi w każdej przeglądarce, którą mam pod ręką, i ma tę dodatkową zaletę, że nie zależy od szerokości elementu.

— Czy Prescott

5

Wszystko, co zrobiłem, to dodać te 2 właściwości i doctype do przykładowego kodu HTML OP. Jednak przy dalszych testach wydaje się, że problem stanowi IE7 (lub 8 w trybie kompatybilności) - wydaje się, że nie szanuje wartości rightwłaściwości, jeśli leftjest również ustawiona! ( msdn.microsoft.com/en-us/library/… zauważa, że lefti rightma tylko „częściową” obsługę w IE7). OK, przyznaję, że to rozwiązanie nie jest dobre, jeśli wsparcie IE7 jest ważne, ale świetna sztuczka do zapamiętania na przyszłość :)

— Will Prescott,

7

to powinna być zaakceptowana odpowiedź. Miałem dwie stałe pozycje, jedną dla maski kryjącej, a drugą dla modalu. był to jedyny sposób, w jaki mogłem wyśrodkować modulację stałej pozycji na środku ekranu. Świetna odpowiedź, kto by pomyślał?

— Chris Hawkes

3

Zgadzam się, to powinna być zaakceptowana odpowiedź. Działa również doskonale w responsywnym projekcie, ponieważ nie zależy od szerokości.

— Hector Ordonez

7

Proponuję uprościć odpowiedź, ponieważ część css dotyczy tylko PO. Wszystko czego potrzebujesz to pozycja: stała; po lewej: 0; prawo: 0; margines: 0 auto; .

— Hector Ordonez

23

Dodaj pojemnik, taki jak:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Następnie włóż pudełko do tego div wykona pracę.

— Romulus Urakagi Ts'ai
źródło

„text-align: center” nie działało dla mnie w centrowaniu wewnętrznego div.

— nima

2

Aby display: inline-blockto działało, musi być wewnętrzne pudełko . (Niektóre inne wartości wyświetlania mogą również działać, takie jak table.)

— Brilliand

lepszym podejściem do wyżej wspomnianego css byłoby dodanie margin:auto;i zmiana szerokości do width:50%lub width:400px. wówczas zawartość może być prostym tekstem, elementami blokowymi lub elementami wbudowanymi.

— Joshua Burns

20

Poprostu dodaj:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;

— Kok
źródło

1

To nie działa position: fixed, o to właśnie chodzi. Jeśli się mylę, edytuj swoją odpowiedź, tak aby zawierała fragment kodu, który można uruchomić.

— Flimm

1

działa świetnie z ustaloną pozycją.

— Phuhui,

1

Działa z position: fixed, pod warunkiem ustawienia elementu max-widthlub widthelementu.

— Js Lim,

7

#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

wewnątrz może znajdować się dowolny element o szerokości, wysokości lub bez diffenet. wszystkie są wyśrodkowane.

— praffessorr
źródło

5

To rozwiązanie nie wymaga od ciebie określenia szerokości i wysokości wyskakującego okienka div.

http://jsfiddle.net/4Ly4B/33/

I zamiast obliczać rozmiar wyskakującego okienka i minus pół do góry, javascript zmienia rozmiar wyskakującego okienka, aby wypełnić cały ekran ...

(100% wysokości, nie działa przy użyciu display: komórka tabeli; (który jest wymagany do wyśrodkowania czegoś w pionie)) ...

W każdym razie to działa :)

— BjarkeCK
źródło

4

left: 0;
right: 0;

Nie działał pod IE7.

Zmienić na

left:auto;
right:auto;

Zaczęło działać, ale w pozostałych przeglądarkach przestało działać! Tak użyłem tej metody dla IE7 poniżej

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}

— jatinder
źródło

Czy masz coś przeciwko edycji odpowiedzi w celu uwzględnienia całego rozwiązania?

— Flimm

To nie zadziała bez automatycznego marginesu po lewej i prawej stronie.

— RoM4iK

2

Możesz po prostu owinąć go w inny divi ustawić positionna fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}

<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>

Rozwiń fragment kodu

— Abdulla Dlshad
źródło

2

Użyłem vw(szerokość rzutni) i vh(wysokość rzutni). rzutnia to cały ekran. 100vwto całkowita szerokość ekranów i 100vhcałkowita wysokość.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}

— Aseem
źródło

1

Aby naprawić pozycję, użyj tego:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}

— HeadAndTail
źródło

3

Podaj wyjaśnienie, dlaczego Twoje rozwiązanie będzie działać w przypadku zadanego pytania.

— Shekhar Chikara,

0

Jedna możliwa odpowiedź :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>

— Martin Vahi
źródło

Wydaje się, że to działa, chociaż wymaga już znajomości szerokości i wysokości elementu.

— Flimm

0

Spróbuj użyć tego do elementów poziomych, które nie będą poprawnie wyśrodkowane.

width: calc (width: 100% - width cokolwiek innego jest poza centrowaniem )

Na przykład jeśli boczny pasek nawigacji ma wielkość 200 pikseli:

width: calc(100% - 200px);

— Robert Ross
źródło

0

Po prostu używam czegoś takiego:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Dla mnie wyśrodkowuje okno dialogowe zarówno w poziomie, jak i w pionie, i mogę użyć innej szerokości i wysokości, aby dopasować różne rozdzielczości ekranu, aby był responsywny, z zapytaniami o media.

Nie jest to opcja, jeśli nadal potrzebujesz obsługi przeglądarek, w których niestandardowe właściwości CSS lub calc()nie są obsługiwane (sprawdź caniuse).

— Fabien Snauwaert
źródło

0

Ten działał dla mnie najlepiej:

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

— Flakuj
źródło

-13

Jedynym niezawodnym rozwiązaniem jest użycie table align = center jak w:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Nie mogę uwierzyć, że ludzie na całym świecie marnują tak dużo na głupi czas na rozwiązanie tak fundamentalnego problemu, jak centrowanie div. Rozwiązanie css nie działa we wszystkich przeglądarkach, jquery jest oprogramowaniem obliczeniowym i nie jest opcją z innych powodów.

Wielokrotnie traciłem zbyt wiele czasu, aby uniknąć korzystania ze stołu, ale doświadczenie mówi mi, żebym przestał z nim walczyć. Użyj tabeli do centrowania div. Działa cały czas we wszystkich przeglądarkach! Nigdy więcej się nie martw.

— Cheong
źródło

11

To wcale nie odpowiada na pytanie. Nie ma odpowiednika innego niż CSS position:fixed.

— Brilliand