html - 将按钮垂直和水平居中

Question

我需要确保视频下方的“下一步”按钮在黄色背景的 block 内垂直和水平居中。

此外，按钮上的“点击”效果似乎没有按预期工作。这里有什么东西引起了冲突，我不知道是什么。

当我只运行“next-video-button”和“next-video-button:active”CSS 规则时，一切正常。

您可以在下面找到我的 CSS 和 HTML。

.course-video {
    background: #f9c70f;
    border: none;
    margin: 0;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
    -moz-box-shadow: 0px 2px 4px rgba(0,0,0,0.3) inset;
    border-radius: 0;
    -moz-border-radius: 0;
}

.next-video-button {
  transition: all 0.1s;
	-webkit-transition: all 0.1s;
	padding: 7px 200px;
	border-radius: 10px;
	font-family: 'Montserrat';
	font-size: 1em;
	color: #ffffff;
	text-decoration: none;
  background-color: #888888;
	border-bottom: 5px solid #5a5a5a;
	text-shadow: 1px -2px #888888;
  text-align: center;
}

.next-video-button:active {
	transform: translate(0px,5px);
  -webkit-transform: translate(0px,5px);
	border-bottom: 1px solid;
}

.video-title {
  font-family: montserrat;
  font-size: 1.5em;
  color: #000000;
  padding: 0.5em;
  box-sizing: border-box;
  width: 854px;
  text-shadow: 0px 2px 4px rgba(0,0,0,0.3);
}

.video-descr {
  width: 854px;
  box-sizing: border-box;
  height: 50px;
  margin-top: -5px;
}

<div class="course-video video-title">Hello</div>
<iframe src="https://player.vimeo.com/video/154094373" width="854" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="course-video video-descr"><a href="#" class="next-video-button">NEXT</a></div>

Answer 1

要使按钮居中，请给它一个宽度并添加 margin: 0 auto 和 display: block; 到 .next-video-button .

由于 a href="#"，该按钮将不起作用。将 # 替换为视频网址。