Center fixed div with dynamic width (CSS)

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

Teraz, Jak mogę zrobić to div centered? Mogę użyć margin-left: -450px; left: 50%;, ale to będzie działać tylko wtedy, gdy ekran jest > 900 pikseli. Następnie (gdy okno ma wartość

Mogę oczywiście zrobić to z jakimś js, ale czy jest "bardziej poprawne" robienie tego z CSS?

Author: Hemerson Varela, 2013-06-12
Source

4 answers

Możesz wyśrodkować fixed lub absolute ustawiając element right i left na 0, a następnie margin-left & margin-right do auto tak, jakbyś centrował static umieszczony 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 ten przykład działa na tym Skrzypku.

 190
Author: laconbass,
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-06-12 16:13:15

Oto inna metoda, jeśli możesz bezpiecznie korzystać z właściwości transform 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 centrować zarówno poziomo, jak i pionowo: 

.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%);
}
 36
Author: Alan Bellows,
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
2016-03-16 12:42:46 
<div id="container">
    <div id="some_kind_of_popup">
        center me
    </div>
</div>
Musisz go zapakować do pojemnika. 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;  
}
 5
Author: Mathew Berg,
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-06-13 11:25:44

To działa niezależnie od wielkości jego zawartości 

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

Źródło: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

 0
Author: Leonardo,
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-02-01 10:36:07