Wyśrodkowany element div z dynamiczną szerokością (CSS)

89

Mam div, który będzie miał ten CSS:

#some_kind_of_popup
{
    position: fixed;
    top: 100px;
    min-height: 300px;
    width: 90%;
    max-width: 900px;
}

Jak mogę wyśrodkować ten div? Mogę użyć, margin-left: -450px; left: 50%;ale będzie to działać tylko wtedy, gdy ekran ma> 900 pikseli. Po tym (gdy okno ma <900 pikseli), nie będzie już wyśrodkowane.

Mogę to oczywiście zrobić za pomocą jakiegoś js, ale czy jest bardziej poprawne zrobienie tego za pomocą CSS?

css html center gubbfett
źródło
4
@Liam - Nie zgadzam się, myślę, że to pytanie jest samo w sobie. Te pytania nie odpowiadają na to pytanie, jeśli chodzi o wyśrodkowanie elementu div bez stałej szerokości.
Joshua M
To, co powiedział Joshua, to skierowanie diva do innego.
gubbfett
7
@Liam - Co więcej, nie możesz używać a margin: 0 autona position: fixeddiv. Czy w ogóle przeczytałeś pytanie?
Joshua M
^ nie. też tego próbowałem. : p
gubbfett
3
@JoshuaM Twoje twierdzenie nie jest w 100% poprawne. Zobacz moją odpowiedź.
bas laconbass

Odpowiedzi:

222

Możesz wyśrodkować fixedlub absoluteustawienie elementu pozycjonowanego righti leftdo 0, a następnie margin-left& margin-rightdo autotak, jakbyś wyśrodkowował staticpozycjonowany element.

#example {
    position: fixed;
    /* center the element */
    right: 0;
    left: 0;
    margin-right: auto;
    margin-left: auto;
    /* give it dimensions */
    min-height: 10em;
    width: 90%;
}

Zobacz przykład pracy nad tym skrzypcem .

laconbass
źródło
1
Wystarczy wspomnieć ... To nie jest takie nieoczekiwane, ale w IE7 nie działa. Znajduje się 0 pikseli od lewej strony.
Jakkolwiek
To nie działa, gdy szerokość elementu jest większa niż szerokość ekranu… byłoby miło, gdyby działał w takiej sytuacji.
andrewb
1
@andrewb możesz zastosować równie ujemny margines zarówno na, jak righti leftco najmniej a value >= witdth / 2, jak widać na jsfiddle.net/PvfFy/168 , ale nie jest to eleganckie podejście IMHO. Przetestowałem to na chrome dla zabawy, nie wiem czy na reszcie
zadziała
5
Poza zakresem pytania zależy to od ustawienia szerokości elementu, więc nie jest dobrze, jeśli masz dynamiczną zawartość, której szerokość jest zmienna lub nieznana. Pomijając wyśrodkowanie na boku, zwykle robiłbym to z display: inline-block i bez ustawionej szerokości. Czy ktoś ma rozwiązanie no-js w tej sprawie?
enigment
4
Pytanie mówi o dynamicznej szerokości , to cały problem, nie możesz tego po prostu zignorować.
Gil Epshtain
54

Oto inna metoda, jeśli możesz bezpiecznie używać transformwłaściwości CSS3 :

.fixed-horizontal-center
{
    position: fixed;
    top: 100px; /* or whatever top you need */
    left: 50%;
    width: auto;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
}

... lub jeśli chcesz wyśrodkować zarówno w poziomie, jak iw pionie:

.fixed-center
{
    position: fixed;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    -ms-transform: translate(-50%,-50%);
    -o-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}
Alan Bellows
źródło
5
O ile dotyczy nowoczesnej przeglądarki, jest to NAJLEPSZE rozwiązanie tej odpowiedzi! Jedyny, który jest jak prawdziwy „float: center”, w którym można klikać wokół elementu owijającego i nie utknąć w miejscu, gdzie trzeba łowić wokół niego. Uwielbiam tę odpowiedź!
SpYk3HH,
1
Ostrożnie, nie używaj tłumaczenia w procentach do wyśrodkowania tekstu, ponieważ zostanie on wygładzony, jeśli wynikowa wartość to liczba zmiennoprzecinkowa. Chłopcze, nie chcesz tego, nie, nie.
gnou
Korzystanie z transformacji CSS może spowodować wygładzanie nie tylko tekstu; W wyniku transformacji dostaję odjechane granice.
Nathan K
1
Możliwość wcześniejszego skurczenia się przy zmianie rozmiaru ekranu (w zależności od rozmiaru dywizji), co skutkuje dużymi granicami wokół krawędzi podziału.
Single Entity
7 
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>

Musiałbyś owinąć go w pojemnik. oto css

#container{
    position: fixed;
    top: 100px;
    width: 100%;
    text-align: center;
}
#some_kind_of_popup{
    display:inline-block;
    width: 90%;
    max-width: 900px;  
    min-height: 300px;  
}
Mathew Berg
źródło
Ach, podoba mi się twoje myślenie. Ustalony element div będzie tylko pojemnikiem na inny element div z rzeczywistym wynikiem? Spróbuję tego!
gubbfett
Chociaż podoba mi się intuicyjność Twojej odpowiedzi, nie widzę możliwości obsługi IE6 / 7.
Mathew Berg,
1
@MathewBerg, dobra uwaga na temat IE6 / 7. W takim przypadku Twoja odpowiedź powinna działać najlepiej. To trochę OT, ale osobiście uważam, że programiści nie powinni tracić czasu na naprawianie rzeczy dla <= ie7. Myślę, że w rzeczywistości programiści powinni blokować te przeglądarki, aby zmusić ludzi i firmy ze starymi systemami do aktualizacji. Jakże trudno sprzedać ten pomysł płacącemu klientowi! ;)
gubbfett
Tak, ale niestety niektóre firmy wymagają obsługi starszych przeglądarek bez względu na to, jak daleko zajdziemy w przyszłość. Śmiało i zaakceptuj odpowiedź moją lub laconbass w zależności od potrzeb.
Mathew Berg
1
to również nie działa, ponieważ nadal nie możesz kliknąć „kontenera”
SpYk3HH,