Center a div larger than the browser window - html

Question

So I made this div for a web projet, it's 1550px wide and I want it centered, no matter the browser's window size.
So far, with margin: 0 auto; I've managed to make it center when the browser windows it at least 1550px *
But when it's smaller, the div doesn't move anymore (it sticks to the left side)
<div class="mosaic rotate-left"></div>
.mosaic { text-align: center;
position: relative;
margin: 0 auto;
width: 1550px;
height: 1550px;
}
This is maybe a bit irrelevant but since it's another class in my div :
.rotate-left {
transform: rotate(-45deg);
}
Thanks in advance !

Answer 1

You can use the absolute/translate trick (it will be centered whatever the width):
.parent {
position: relative; /* or absolute if you need */
}
.mosaic {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}

Answer 2

You can do something like this...
.mosaic{
position:absolute;
top:0px;
left:50%;
margin-left:-775px; /* half of the width */
height:1550px;
}
just make sure the parent has a position:absolute/relative on it

Answer 3

How about combining to two aslready working solutions?
#media (max-width: 1550px) {
.inner {
position: absolute;
text-align: center;
background-color: red;
width: 1550px;
height: 1550px;
left: 50%;
-webkit-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
}
#media (min-width: 1549px) {
.inner {
position: relative;
text-align: center;
background-color: red;
width: 1550px;
height: 1550px;
margin-left: auto;
margin-right: auto;
}
}