Question

我试图将我的按钮定位在左中间：50％顶部：50％，但最终超过50％。它是我尝试与叠加做的视频背景。我将其中的视频标签设置为position：absolute;直到涉及该按钮时，其他文本才可以定位。我想这可能是我放置视频背景的方式，但是我不确定。我真的可以在此感谢一些帮助。

CSS

/*----Global----*/
}
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}
html,body {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.fullscreen-video-wrap{
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	opacity: 0.5;
}
.travel{
	position: absolute;
	top: 10px;
	left: 16px;
	z-index: -1;
	font-size:18px;
	font-family: Raleway;
}
.blue{
	color: rgb(0, 119, 255);
}
.motto{
	position: absolute;
	top: 27px;
	left: 16px;
	z-index: -1;
	font-size:14px;
	font-family: Abril Fatface;
}
.destination{
	position: absolute;
	text-align: center;
	top: 50%;
	left: 0;
	width: 100%;
	z-index: -1;
	font-family: Raleway;
	font-size: 18px;
}
.quotes{
	position: absolute;
	text-align: center;
	top:55%;
	left: 0
	width:100%;
	z-index: -1;
	font-family:Raleway;
	font-size: 14px;
}
.button{
	position: absolute;
	text-align: center;
	top: 60%;
	left: 50%;
	z-index: -1;
}

HTML

<!DOCTYPE html>
<html>
<head>
	<title>Traveling.com</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="New.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
@import url('https://fonts.googleapis.com/css?family=Raleway');
@import url('https://fonts.googleapis.com/css?family=Abril+Fatface');
</style>
<body>
	<div class="fullscreen-video-wrap">
		<video autoplay muted loop >
			<source src="videos/sunrise_01.mp4" type="video/mp4">
		</video>
	</div>
	<div class="header-content"></div>
	<h1 class="travel">Traveling<span class="blue">.com</span></h1>
	<p class="motto"><i>Travel <span class="blue">Beautifully</span></i></p>
	<h4 class="destination">Find your destination</h4>
	<p class="quotes">“A lie can travel half way around the world while the truth is putting on its shoes.” 
	― Mark Twain</p>
	<button class="button">Sign up</button>
</body>
</html>

Answer 1

您可以使用转换来转换元素-50％，这应该可以

.button{
    position: absolute;
    text-align: center;
    top: 60%;
    left: 50%;
    transform: translateX(-50%); /*Added*/
    z-index: -1;
}

让我知道是否有帮助！

修改

当您使用position: absolute;和left: 50%赋予元素时，它永远不会真正居中，它将把他推到父元素的50％，看看这张图片

我添加transform: translateX(-50%);的目的是将元素移至自身-50％以上

希望这可以帮助您理解，here可以找到有关translateX（）函数的更多信息，并且您还可以阅读有关转换property的信息。

CSS定位按钮

1 个答案: