Wyśrodkuj pozycję a: element stały

Question

Wyśrodkuj pozycję a: element stały

Chciałbym zrobić wyskakujące okienko position: fixed; wyśrodkowane na ekranie z dynamiczną szerokością i wysokością. Użyłem margin: 5% auto; do tego. Bez {[2] } centruje dobrze poziomo, ale nie pionowo. Po dodaniu position: fixed;, Nawet nie centruje się poziomo.

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>

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

330

css centering css-position

Author: BalusC, 2010-01-05

Source

12 answers

Chcę zrobić wyskakujące okienko wyśrodkowane do ekranu z dynamiczną 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 centrowania zarówno pionowego, jak i poziomego można użyć następujących elementów:

Zaktualizowany Przykład

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

Możesz chcieć dodać więcej vendor prefixed properties too (patrz przykłady).

195

Author: Josh Crozier,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-09-14 02:25:12

Lub po prostu dodaj left: 0 i right: 0 do oryginalnego CSS, co sprawia, że zachowuje się podobnie do zwykłego elementu Nie-stałego i działa zwykła technika auto-margin:

.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 zachowywał się poprawnie w IE (co oczywiście i tak powinieneś mieć..!)

126

Author: Will Prescott,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-01-05 12:53:16

Dodaj kontener w stylu:

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

Następnie umieścić swoje pudełko w tym div zrobi pracę.

20

Author: Romulus Urakagi Ts'ai,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-07-14 12:47:46

Wystarczy dodać:

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

10

Author: Bob,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-08 05:43:44

To rozwiązanie nie wymaga od Ciebie definiowania szerokości i wysokości do Popup div.

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

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

(100% wysokości, nie działa przy użyciu display: table-cell; (które jest wymagane, aby wyśrodkować coś pionowo))...

Anyway it works:)

5

Author: BjarkeCK,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-08 10:46:40

left: 0;
right: 0;

Nie działa pod IE7.

Zmieniono na

left:auto;
right:auto;

Zaczęło działać, ale w pozostałych przeglądarkach przestało działać! Więc użyty w ten sposób dla IE7 poniżej

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

4

Author: jatinder,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-07-22 17:54:21

Możesz w zasadzie owinąć go w inny div i ustawić jego position na 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>

2

Author: Abdulla Dlshad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-10 12:33:00

Aby naprawić pozycję Użyj tego : -

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

1

Author: HeadAndTail,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-09-27 14:53:03

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>

0

Author: Martin Vahi,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-08-05 03:56:18

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

Width: calc (width: 100% - width: 100% - )

Na przykład, jeśli pasek nawigacji po stronie jest 200px:

width: calc(100% - 200px);

0

Author: Robert Ross,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-07 16:58:20

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ą tyle czasu na głupie rozwiązanie tak fundamentalnego problemu, jak centrowanie div. rozwiązanie css nie działa dla wszystkich przeglądarek, rozwiązanie jquery jest rozwiązaniem obliczeniowym oprogramowania i nie jest opcją z innych powodów.

Wielokrotnie traciłem zbyt dużo czasu, aby uniknąć używania tabeli, ale doświadczenie każe mi przestać z nią walczyć. Użyj tabeli dla centrowanie div. Działa cały czas we wszystkich przeglądarkach! Nigdy więcej się nie martw.

-11

Author: Cheong,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-05-10 16:18:26

score 492 · Accepted Answer

Zasadniczo musisz ustawić top i left na 50%, aby wyśrodkować lewy górny róg div. Musisz również ustawić margin-top i margin-left na ujemną połowę wysokości i szerokości div, aby przesunąć środek w kierunku środka div.

Tak więc, pod warunkiem <!DOCTYPE html> (Tryb standardowy), 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 zależy ci na centrowaniu w pionie i starych przeglądarkach, takich jak IE6/7, możesz zamiast tego dodać left: 0 i right: 0 do elementu posiadającego margin-left i margin-right z auto, tak aby stały element o stałej szerokości wiedział, gdzie zaczynają się jego lewe i prawe przesunięcia. W Twoim przypadku tak:

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 koncentruje się tylko poziomo, a nie pionowo.