truncar - Centro fijo div con ancho dinámico(CSS)

tamaño container bootstrap

Question

Tengo un div que tendrá este CSS:

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

Ahora, ¿cómo puedo hacer que este div se centre? Puedo usar margin-left: -450px; left: 50%; margin-left: -450px; left: 50%; pero esto solo funcionará cuando la pantalla tenga> 900 píxeles. Después de eso (cuando la ventana sea <900 píxeles), ya no estará centrado.

Por supuesto, puedo hacer esto con algún tipo de js, pero ¿hay un "más correcto" de hacer esto con CSS?

Answer 1

Aquí hay otro método si puede usar de manera segura la propiedad de transform de 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%);
}

... o si desea un centrado horizontal Y vertical:

.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%);
}

Answer 2

Esto funciona independientemente del tamaño de su contenido

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

fuente: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/

Answer 3

Puede centrar un ajuste de elemento posicionado fixed o absolute right y hacia la left en 0 , y luego en margin-left y margin-right en auto como si estuviese centrando un elemento posicionado static .

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

Mira este ejemplo trabajando en este violín .

Answer 4

<div id="container">
<div id="some_kind_of_popup">
center me
</div>
</div>

Tendría que envolverlo en un contenedor. aquí está el 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;
}