Question

这可能是一个超级简单的CSS问题，但我不能在不使用margin-left的情况下将主区域居中。是否有更好的解决方案将其置于屏幕上 - 无论窗口大小是多少？我认为问题的一部分是盒子是1300px。是的 - 它需要那么大。

＆＃13;

man popen

＆＃13;

[Test]
public void LambdaTest()
{
    var m = Expression.Lambda(typeof(Func<int>), Expression.Constant(0)).Compile();
    Assert.That(m.Method.DeclaringType, Is.Not.Null);
}

＆＃13;

Answer 1

你试过margin: 0 auto;吗？它应该以div为中心。

#mainContent{
  
  width:300px;
  height:300px;
  border:2px solid #f6f6f6;
  background-color:black;
  margin: 0 auto;
 

}

<div id="mainContent">

</div>

Answer 2

试试这个：

#mainContent{
  position: relative;
  margin: 0 auto;
  width:1300px;
  height:800px;
  border:2px solid #f6f6f6;
  background-color:black;
}

Answer 3

如果内容没有响应，并且您希望在窗口宽度小于1300px时进行裁剪，则还有另一种选择：

#mainContent{
  ...
  margin-left: calc(50% - 650px);
}

以下是其中的一个示例：https://jsfiddle.net/yvwnvmsf/1/

Answer 4

#mainContent{
  
display:flex;
min-height:100vh;
align-items: center;
justify-content: center;
flex-direction: column;
border:2px solid #f6f6f6;
}

<div id="mainContent">
    <font>Like this?</font >
</div>

屏幕中心div无论窗口大小

4 个答案: