Question

我有一个网站，其中有一个圆圈图片。

我希望这个图像始终处于中心位置。（小/中/大屏幕）

要清除它visit。

代码在这里： -

<html>
<head>
<title>
Maintenance in Progress
</title>
<style>
.timer {
  text-align: center;
  font-size: 60px;
  color: white;
   position: absolute;
    right: 500px;
    bottom: 0;
}
body {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.utxt{
    position: absolute;
}

.circle{
    position: absolute;
    top: 50%;
    left: 50%;
}
.dtxt{
    position: absolute;
    bottom: 0;
}
</style>
</head>
<body background="maintenance/bg.png">
<img class="utxt" src="maintenance/utxt.png"></img>
<img class="circle" src="maintenance/circle.png"></img>
<img class="dtxt" src="maintenance/dtxt.png"></img>
<div class="timer" id="demo"></div>
</body>
</html>

请帮帮我！

Answer 1

将transform: translate(-50%, -50%);添加到.circle的现有样式。

.circle{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

完整代码随附更新。

<html>
<head>
<title>
Maintenance in Progress
</title>
<style>
.timer {
  text-align: center;
  font-size: 60px;
  color: white;
   position: absolute;
    right: 500px;
    bottom: 0;
}
body {
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
.utxt{
    position: absolute;
}

.circle{
    position: absolute;
    top: 50%;
    left: 50%;
transform: translate(-50%, -50%);
}
.dtxt{
    position: absolute;
    bottom: 0;
}
</style>
</head>
<body background="maintenance/bg.png">
<img class="utxt" src="maintenance/utxt.png"></img>
<img class="circle" src="maintenance/circle.png"></img>
<img class="dtxt" src="maintenance/dtxt.png"></img>
<div class="timer" id="demo"></div>
</body>
</html>

很高兴帮助你。

Answer 2

在您的圈子图片中添加规则：

transform: translate(-50%, -50%);

Answer 3

将transform: translate(-50%, -50%);添加到.circle的现有样式。

使图像垂直和水平居中。

Answer 4

如果我做对了，可能会将此添加到您的CSS中可以提供帮助：

-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;

如何居中图像

4 个答案: