Jak wyśrodkować DIV o nieznanym rozmiarze w poziomie i pionie na ekranie

Potrzebuję wyśrodkować DIV na środku poza ekranem, zarówno w poziomie, jak iw pionie, nie znam rozmiaru DIV, a div to position:fixed;.Jak wyśrodkować DIV o nieznanym rozmiarze w poziomie i pionie na ekranie

Ta ujemna sztuczka z marginesem nie działa, ponieważ nie znam rozmiaru div. top:50%; left:50%; magin-top:-100; margin-left:-100;

margin-left: auto; margin-right: auto; nie działa, ponieważ nie pracuje z position:fixed; i margin-top:auto; margin-bottom:auto; również nie pionowo środek;

Znalazłem, że ta metoda: display: table-cell; vertical-align: middle; nie działa eter;

Wiem, jak to zrobić z JavaScript za pomocą getComputedStyle, aby uzyskać rozmiar zawartości div, i zrobić matematykę, aby naprawić to położenie, ale chcę czyste rozwiązanie CSS, ponieważ nie chcę wywoływać JS za każdym razem zmieni się zawartość div.

Źródło

2012-05-20 Vitim.us

Jak zmienia się zawartość "div"? Poprzez zwykłą animację CSS lub animacje JavaScript? – balexandre

@balexandre nie ma animacji, zmiany treści za pośrednictwem Ajax –

Czy coś takiego działa? Używa również display: table-cell, ale wymaga 2 znaczników div do pracy ... znacznika nadrzędnego o określonym stylu.

NB: Dodałem z-index:-1; do klasy centralnej. Możesz to poprawić w oparciu o swój projekt.

<style> 
.centerbase{ 
    display: table; 
    vertical-align: middle; 
    height:100%; 
    width:100%; 
    text-align:center; 
    position:fixed; 
    z-index:-1; 
} 
.centerpane{ 
    display: table-cell; 
    vertical-align: middle; 
} 
</style> 
<div class="centerbase"> 
    <div class="centerpane"> 
     <img src="https://www.google.com/images/srpr/logo3w.png" /> 
    </div> 
</div>

Jeśli chcesz dodać tekst, który nie jest wyrównany centrum w centerpane można dodać inny div wewnątrz centerpane i określić styl jako coś w rodzaju: text-align:left; width:400px; margin:0px auto; Trzeba będzie określić szerokość dla tego dodatkowego div .

Źródło

2012-05-20 06:31:38 signal2013

Spójrz na demo (wysokość jest nieznana, szerokość jest ustawiona).

Można użyć tabel css (w tym przykładzie html jest tabelą, a body jest komórką tabeli). Markup:

<body> 

    <div id="container"> 
     <h1>Lorem ipsum</h1> 
     <p>At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p> 
    </div> 

</body>

CSS:

html { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
    display: table; 
} 
body { 
    margin: 0; 
    padding: 0; 
    display: table-cell; 
    vertical-align: middle; 
} 
#container { 
    width: 400px; 
    margin: 0 auto; 
    background: #ffea00; 
    border: 2px solid #ff9800; 
}

Czy potrzebujesz obejście IE < = 7 (od IE < = 7 nie wie o tabel | table-cell)?

Źródło

2012-05-20 08:31:57 roger

Potrzebuję tylko wsparcia dla przeglądarek kompilujących. Zmienianie html i body style nie miesza się z innymi wstawianymi treściami na stronie lub działa z wrapperami div? –

Możesz pionowo wyśrodkować pudełko o nieznanej wysokości za pomocą tabel css. Wysokość pudełka zależy od jego zawartości. Zobacz: demo, która używa pozycji : poprawiona dla skrzynki. Szerokość pola jest również ustawiona na.

I to jest obejście dla IE < = 7:

#table { 
    height:100%; 
    text-align:center; 
    white-space: nowrap; 
} 
#container { 
    display: inline; 
    zoom: 1; 
    text-align: left; 
    vertical-align: middle; 
} 
#IEcenter { 
    height: 100%; 
    width: 1px; 
    display: inline; 
    zoom: 1; 
    vertical-align: middle; 
} 
#container * { 
    white-space: normal; 
}

Czy to spełnić wymagania?

Źródło

2012-05-20 17:28:03

Jeśli pracujesz z pozycjami, pomocne będą tutaj właściwości przekształcania.

Po prostu trzeba dodać poniższe właściwości elementu, który musi skoncentrowane,

position: absolute; 
left: 50%; 
top: 50%; 
transform: translate(-50%);

Proszę usunąć dodatkowy margines i wyściółka dodany do elementu.

Źródło

2017-04-19 11:00:23

Jak wyśrodkować DIV o nieznanym rozmiarze w poziomie i pionie na ekranie

Odpowiedz

Powiązane problemy