Question

我正在尝试使用div来居中所有内容，但是每次使用中心代码时，我的内容都会完全歪斜。

我尝试使用此代码

position: relative;
max-width: 100%;
height: auto;
top: 50%;
left: 50%;

但是，这导致我的内容对齐到最右边。我不确定自己在做什么错，但这可能与我的课堂风格有关。

这是我正在使用的代码的一部分。我正在为我的课程建立一个网站！

CSS：

.centercontent {
    position:relative;
    max-width: 100%;
    height: auto;
    top: 50%;
    left: 50%;
}

.front {
    position:absolute;
    top: 50px;
    left:800px;
    z-index: 2;
}

HTML：

<div class="centercontent">
  <img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" />
</div>

我认为使用Z-index会使代码表现得有些奇怪，但是我必须使用Z-Index来对齐我的总代码中的所有部分。如果不是Z索引，那我就不知道怎么了。

我的最终目标是使内容居中，而不管其在什么尺寸的计算机上查看。无论计算机有多大，我都希望图像具有相同的比例；如果计算机较小，则图像也应较小。无论如何，它将保持在屏幕中央。

非常感谢您的帮助！

Answer 1

有很多方法可以使CSS中的内容居中。您可以在此处查看一些提示和说明：tips to center z-index不会导致对齐错误：）

举例来说，只需添加一个转换：将（-50％，-50％）转换到您的容器中即可。

您可以在下面看到修改后的代码

  "%~dp0\..\webpack-cli\bin\cli.js" %*
    ) ELSE (
      @SETLOCAL
      @SET PATHEXT=%PATHEXT:;.JS;=;%
      node  "%~dp0\..\webpack-cli\bin\cli.js" %*

    .centercontent{
        position:absolute;
        max-width: 100%;
        height: auto;
        top: 50%;
        left: 50%;
        border:2px solid tomato;
        transform: translate(-50%, -50%);
    }

Answer 2

您需要为主样式指定样式，即“ centercontent”，并从图像中删除其他样式。因此，您的整个代码将如下所示。

<!Doctype html>
<html>
<head>

<style>
    .centercontent {
    text-align: center;
    position: relative;
    max-width: 100%;
    }
    .front {

        z-index: 2;
    }

</style>
</head>

<body>
<div class="centercontent">

<img src="https://lh3.googleusercontent.com/LIWtQclJc-pb9mtmO09gkVW10DEksAG2ma3BFO5th7Wj68Odo3k4KV24jcxNi-jY8l3ZFBfExvXQqgdTIhYVwbPNKB3kR-7cup4U_T6GOOiW0N2ahd70Fc-JF4tI2sUKHtAvyzwvvg=w2400" class="front" >

</div>

</body>
</html>

Answer 3

要使容器在任何屏幕尺寸上居中，可以使用以下代码。

.centercontent{
  margin: 0 auto;
  width:50%; // You can put any width to the container.
}

Answer 4

您所做的几乎是正确的。但是您对水平对齐对象的尝试感到困惑。

在块级元素上水平对齐的最简单方法：

text-align: center;

要垂直对齐：

position: relative;
top: 50%;
transform: translateY(-50%);

这是一个有效的示例：https://jsfiddle.net/yorjk2h7/

Answer 5

.centercontent{
    position:relative;
    width: 100%;
    height: auto;
    display: block;
    text-align: center;
}
.front {
max-width: 100%;
z-index:2
}

希望这就是您需要的

Answer 6

在您的CSS中尝试此代码

.centercontent {
    max-width: 100%;
    height: auto;
  }

.front {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
  }

如何居中具有Z索引的内容

6 个答案: