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。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 5

在容器类中使用它

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

它会起作用