React中打开控制台页面元素偏移，如何使div保持固定？

问题根源 #

你当前给.global设置了固定宽度1200px和垂直外边距100px，当打开浏览器控制台导致视口宽度/高度缩小时，视口无法容纳元素的固定尺寸，就会出现元素被挤压到边缘的情况。

解决方案 #

方案1：用Flex布局实现永久居中（推荐） #

通过给根容器（html/body）设置Flex布局，让.global始终保持在视口的水平和垂直中心，不受视口尺寸变化影响：

修改你的CSS：

/* 先给html和body设置基础样式 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
}

.global{
    background-color: rgb(46, 43, 43);
    width: 1200px;
    height: 700px;
    /* 移除原来的margin:100px auto */
}

方案2：保留顶部间距+自适应宽度 #

如果想维持顶部的100px间距，同时避免视口宽度不足时元素被挤到边缘，可以添加max-width让元素自适应视口：

.global{
    background-color: rgb(46, 43, 43);
    width: 1200px;
    max-width: 90%; /* 视口宽度不足时，元素最多占视口90% */
    height: 700px;
    margin: 100px auto;
}

如果担心垂直方向视口不足时元素被挤到顶部，可以额外给body设置最小高度，确保有足够空间容纳元素：

body {
  min-height: 100vh;
  margin: 0;
}

内容的提问来源于stack exchange，提问作者Ariel Alvaro