Question

所以我为网络项目制作了这个div，它的宽度为1550像素，无论浏览器的窗口大小如何，我都希望它居中。

到目前为止，保证金：0自动;当浏览器将窗口设置为至少1550px *

时，我已设法使其成为中心

但是当它更小时，div不再移动（它粘在左侧）

<div class="mosaic rotate-left"></div>

.mosaic { text-align: center; 
position: relative; 
margin: 0 auto;
width: 1550px;
height: 1550px;
}

这可能有点无关紧要，但因为它是我div中的另一个类：

.rotate-left {
transform: rotate(-45deg);
}

提前致谢！

Answer 1

您可以使用绝对/翻译技巧（无论宽度如何都会居中）：

.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

你可以这样做......

.mosaic{
    position:absolute;
    top:0px;
    left:50%;
    margin-left:-775px; /* half of the width */
    height:1550px;
}

确保父母有一个位置：绝对/相对

Answer 3

如何合并到两个已经准备好的工作解决方案？

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

将一个div大于浏览器窗口

3 个答案: