I have a div that will have this CSS:
#some_kind_of_popup
{
position: fixed;
top: 100px;
min-height: 300px;
width: 90%;
max-width: 900px;
}
Now, how can i make this div centered? I can use margin-left: -450px; left: 50%;
but this will only work when the screen is > 900 pixels. After that (when the window is < 900 pixels), it will no longer be centered.
I can of course do this with some kind of js, but is there a "more correct" of doing this with CSS?
This works regardless of the size of its contents
.centered {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
source: https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/
This approach will not limit element's width when using margins in flexbox
top: 0; left: 0;
transform: translate(calc(50vw - 50%));
Also for centering it vertically
top: 0; left: 0;
transform: translate(calc(50vw - 50%), calc(50vh - 50%));
Here's another method if you can safely use CSS3's transform
property:
.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%);
}
...or if you want both horizontal AND vertical centering:
.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%);
}
<div id="container">
<div id="some_kind_of_popup">
center me
</div>
</div>
You'd need to wrap it in a container. here's the 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;
}
Source: Stackoverflow.com