我在使按钮出现在屏幕中央时遇到问题。该按钮应该位于屏幕中央,但不知何故,我的 css 正在使按钮的中心位于左上角。有人知道为什么吗?更多细节:我希望它是这样的:它应该是什么样子
但相反,它看起来像这样:外观如何
有人可以帮忙吗?这是代码:
html, body {margin: 0; height: 100%; overflow: hidden}
img
{
max-width: 100%;
height: auto;
position: relative;
top: 33%;
}
.obj1
{
width: 20%;
height: 100%;
background: rgb(136, 44, 44);
float:left;
position: relative;
}
.obj2
{
width: 20%;
height: 100%;
background: rgb(255, 255, 255);
position: relative;
float:left;
}
.obj3
{
width: 20%;
height: 100%;
background: rgb(0, 0, 0);
position: relative;
float:left;
}
.obj4
{
width: 20%;
height: 100%;
background: rgb(42, 75, 148);
position: relative;
float:left;
}
.obj5
{
width: 20%;
height: 100%;
background: rgb(72, 114, 48);
position: relative;
float:left;
}
.obj6
{
width: 20%;
height: 100%;
background: rgb(119, 39, 112);
position: relative;
float:left;
}
#show-more
{
background: #1594e5;
color: #fff;
font-family: calibri;
display: block;
width: 140px;
font-size: 24px;
text-transform: uppercase;
padding: 10px;
text-align: center;
margin: 20px auto;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
<body>
<div class="obj1">
</div>
<div class="obj2">
</div>
<div class="obj3"></div>
<div class="obj4"></div>
<div class="obj5"></div>
<a id="show-more">Show More</a>
</body>
使用绝对位置和上/左指向元素的左上角。此外,使用 transform: translate(-50%, -50%);
将按钮移动到其高度/宽度的 50% 的顶部和左侧