CSS 响应中心区答案

【问题标题】：CSS Responsive Center DivCSS 响应中心区
【发布时间】：2020-10-28 19:25:05
【问题描述】：

我想将一些具有背景图像的 div 居中。这个 div 的响应存在问题，因为如果我将宽度设置为 80%，将高度设置为 80%，则 bg-image 不在中心。我尝试了所有方法，但图片不能只是站在中心，如果浏览器变小或变大，这是非常大的问题。

所以如果你看图片

我想让这个白色块响应。

我已经写了一些 css，但现在没有响应：

top: 20%;
left: 30%;
display: block;
position: absolute;
background: url(images/background.png) no-repeat;
background-size: 750px 417px;
width: 750px;
height: 417px;

【问题讨论】：

标签： css html background center

【解决方案1】：

您可以使用 CSS 转换：

position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);

【讨论】：

【解决方案2】：

两年前我也想做同样的事情，有解决办法：

因为您希望它具有响应性，您可以使用 CSS3 中的 @media 函数。像这样：

@media (max-width: 480px) {
    #div {
        top: 50%; /* IMPORTANT */
        left: 50%; /* IMPORTANT */
        display: block;
        position: absolute;
        background: url(images/background.png) no-repeat center center;
        width: 750px;
        height: 417px;

        margin-top: -208.5px; /* HALF OF THE HEIGHT */
        margin-left: -375px; /* HALF OF THE WIDTH */
    }
}

你使用的max-width是设备屏幕的最大宽度。您只需复制它并更改图像的width, height, margin-left and margin-top。另外，您应该更改background 标签！

它将图像在页面上居中。

您可以在以下位置查看示例：Créations MicroWeb - Carrières。即使您更改窗口侧，图像也完全居中。

您可以在body 上添加overflow: hidden; 以使页面在分辨率过低时无法滚动。和我一样。

编辑：JSFiddle

【讨论】：

像 Bootstrap 一样响应？背景是否随设备屏幕调整大小？
是的，如果有人有更小的屏幕来显示更小的背景图片，如果有人有更大的屏幕来显示它只显示全宽/高度图片，仅此而已。
div现在确实居中了，但是响应还是有问题。如果我设置了最大宽度，这意味着如果屏幕太大的人打开此站点，div 将消失。当有小屏幕的人访问我的网站时，我需要制作更小的图像，但我不知道该怎么做。我需要 JavaScript 来检查它的浏览器的宽度和高度吗？
是的，max-width 会的。但你也可以使用min-width 和@media (min-width: 1280px) { } 一样，任何超过此尺寸的屏幕都会显示所选图像。

【解决方案3】：

尝试使用自动边距并显示为表格：

.your-class {
  margin-left: auto;
  margin-right: auto;
  display: table;
}

【讨论】：

这背后的理论是什么？

【解决方案4】：

你可以使用margin:0 auto;将一个div水平居中，只要它的宽度小于容器div的宽度。

【讨论】：

是的，但是 div 应该是绝对定位的，所以这不是选项。

【解决方案5】：

请试试这个：

img { max-width:100%; max-height:100%; margin:auto; }

【讨论】：

【解决方案6】：

我在元素上使用display: inline-block; 来居中，在父 div 上使用text-align: center;。

【讨论】：

【解决方案7】：

.container{display: flex; justify-content: center; align-items: center}

【讨论】：

请添加描述说明。为什么这个答案有帮助。