CSS响应边距顶部

Question

我想以这种方式将<div class="container"></div>放置在屏幕中间，以使其能够响应任何屏幕尺寸。 屏幕截图上的红色标记区域应始终出现在屏幕中间。

如何定位？ 当前，当我挤压浏览器时，我正在使用margin-top:85px ，红色标记区域和导航栏之间的距离也应该减小。

Answer 1

您是否尝试过绝对居中？ 您将需要相对于父容器添加一个位置...您还需要在容器元素上声明一个高度...

.parent-container {
    position: relative;
}

.container {
    width: 50%;
    height: 50%;
    overflow: auto;
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

我希望这有帮助...

Answer 2

在容器上定义一些宽度，然后将上边距和下边距设置为某些所需的值，将左右值设置为auto以便始终将两边的剩余空间均分。

.container{
  width : 84%
  margin : 2rem auto;
}

Answer 3

尝试这个例子

.container {
   width: 75%;
   margin: 50px auto 0;
}

Answer 4

工作代码段已添加。 对于任何屏幕尺寸，此代码都会使div在水平和垂直方向上居中。

为容器的父级设置css属性position:relative 。

 .container { width: 400px; height: 300px; background-color: #ccc; position: absolute; /*it can be fixed too*/ left: 0; right: 0; top: 0; bottom: 0; margin: auto; /*this to solve "the content will not be cut when the window is smaller than the content": */ max-width: 100%; max-height: 100%; overflow: auto; } 

 <div class="container"> </div> 

Answer 5

在容器类中使用它

.container{
    position:fixed; 
    top:0;
    left:0;
    right:0; 
    bottom:0; 
    width:auto; 
    height:200px; /****set height****/
    margin:auto;
}

会工作的