html - 将按钮放在页面的中央，顶部已经有一个导航栏

Question

我的按钮被放置在我的导航栏后面。(可以看到的蓝色轮廓实际上是错误放置的框。)如何将立即注册框放在页面中央？我试过使用我的按钮链接有一个单独的类，但似乎没有任何效果。

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
html,body
{
padding: 0;
margin: 0;
height:100%;
width:100%;
}

*{
scroll-behavior: smooth;
}

.screen
{
height:100%;
width:100%;
margin: auto;
background: url(https://images7.alphacoders.com/587/587593.png) no-repeat center center fixed ;
background-size: cover;
}

.cs-img img{
height: 20%;
width: 10%;
 }

ul{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
}

li
{
display: block;
float: left;
margin-right: 1px; 
}

 li a
 {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-decoration: none;
background: #2f3036;
color:#fff;	
 }

li a:hover{
background-color: #19c589;
}

li:hover ul li a{
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

li:hover ul li a:hover{
background: #19cf98;
color: #fff;
}

li ul li{
display: none;
float: none;
}

li:hover ul li{
display: block;
}

.submit{
display:table-cell;
vertical-align: middle;
width: 100%;
max-width: none;
}

.navbar{
font-family: 'Montserrat',sans-serif;
font-size: 135%;
font-weight:400%;
color:#3a6168;
text-transform: uppercase;
text-anchor: start;
text-decoration: none;
border: solid #3a6168;
padding: 10px 20px;
border-radius: 9px;
transition: all;
}

<section class="screen">
		<div class="inner">
			<div class="cs-img">
				<img src="https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/products/10series/counter-strike/NV-GF-GTX-Game-Ready-logo-RGB.png"><img src="http://media.kingston.com/images/hyperx-logo-lrg.png">
			</div>
			<div class="menu">
				<ul>
		<li><a href="#">Home</a></li>		
		<li><a href="#">About</a>
		<ul>
			<li><a href="#">Our Team</a></li>
			<li><a href="#">Mission</a></li>
			<li><a href="#">Achievements</a></li>
		</ul>
		</li>
		<li><a href="#">Teams Playing</a>
		<ul>
			<li><a href="#">Faze Clan</a></li>
			<li><a href="#">Ninja in Pyjamas</a></li>
			<li><a href="#">Liquid</a></li>
			<li><a href="#">SK_Gaming</a></li>
			<li><a href="#">Cloud_9</a></li>
		</ul>
		</li>
		<li><a href="#">Contact</a>
		</li>
		<li><a href="#">News</a></li>
	</ul>		
	
				</div>
			</div>
			<div class="submit">	
				<a href="#middle" class="navbar"><font face="Times New Roman" size="70">Enroll Now</font></a>
	</section>

	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestias, aperiam dignissimos excepturi dolores? Recusandae, perferendis necessitatibus autem doloribus, sapiente iusto itaque? Quo sequi delectus dolorum, quia praesentium maiores. Eveniet, deserunt saepe? Voluptatibus atque officia rem nostrum, quam perferendis, quis ratione iusto vitae quae enim possimus ducimus architecto cumque repellendus ipsum, esse ex magni nesciunt itaque animi. Aliquam labore consectetur laboriosam minus illo at nobis, delectus, voluptas? Ut doloribus cumque, maxime fuga reprehenderit officiis provident quaerat dignissimos unde nemo ipsam itaque expedita, labore at. Fugiat porro nam laborum maxime veritatis neque explicabo placeat repellendus quisquam quo, nemo, enim facilis fugit.</p>
	
	<section id="middle">
		<img src="https://images4.alphacoders.com/653/653563.jpg">
	</section>

[错误图片][1]这是我代码中的错误

Answer 1

试试这个:单击整页以获得最佳结果。 fiddle :https://jsfiddle.net/1p2ef7mx/1/

@import url('https://fonts.googleapis.com/css?family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300');
html,body
{
padding: 0;
margin: 0;
height:100%;
width:100%;
}

*{
scroll-behavior: smooth;
}

.screen
{
height:100%;
width:100%;
margin: auto;
background: url(https://images7.alphacoders.com/587/587593.png) no-repeat center center fixed ;
background-size: cover;
}

.cs-img img{
height: 20%;
width: 10%;
 }

ul{
margin: 0;
padding: 0;
list-style: none;
position: absolute;
}

li
{
display: block;
float: left;
margin-right: 1px; 
}

 li a
 {
display: block;
min-width: 140px;
height: 50px;
text-align: center;
line-height: 50px;
font-family: 'Open Sans Condensed', sans-serif;
text-decoration: none;
background: #2f3036;
color:#fff; 
 }

li a:hover{
background-color: #19c589;
}

li:hover ul li a{
background: #f3f3f3;
color: #2f3036;
height: 40px;
line-height: 40px;
}

li:hover ul li a:hover{
background: #19cf98;
color: #fff;
}

li ul li{
display: none;
float: none;
}

li:hover ul li{
display: block;
}

.submit{
display:table-cell;
vertical-align: middle;
width: 366px;
height: 80px;
max-width: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}

.navbar{
font-family: 'Montserrat',sans-serif;
font-size: 135%;
font-weight:400%;
color:#3a6168;
text-transform: uppercase;
text-anchor: start;
text-decoration: none;
border: solid #3a6168;
padding: 25px 20px;
border-radius: 9px;
transition: all;
}

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Counter Strike</title>
 <!--<link rel="stylesheet" type="text/css" href="cs.css">-->
 <link rel="stylesheet" type="text/css" href="csx.css">
</head>
<body>
<section class="screen">
    <div class="inner">
        <div class="cs-img">
            <img src="https://www.nvidia.com/content/dam/en-zz/Solutions/geforce/products/10series/counter-strike/NV-GF-GTX-Game-Ready-logo-RGB.png"><img src="http://media.kingston.com/images/hyperx-logo-lrg.png">
        </div>
        <div class="menu">
            <ul>
    <li><a href="#">Home</a></li>       
    <li><a href="#">About</a>
    <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Mission</a></li>
        <li><a href="#">Achievements</a></li>
    </ul>
    </li>
    <li><a href="#">Teams Playing</a>
    <ul>
        <li><a href="#">Faze Clan</a></li>
        <li><a href="#">Ninja in Pyjamas</a></li>
        <li><a href="#">Liquid</a></li>
        <li><a href="#">SK_Gaming</a></li>
        <li><a href="#">Cloud_9</a></li>
    </ul>
    </li>
    <li><a href="#">Contact</a>
    </li>
    <li><a href="#">News</a></li>
</ul>       

            </div>
        </div>
        <div class="submit">    
            <a href="#middle" class="navbar"><font face="Times New Roman" size="70">Enroll Now</font></a>
</section>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur molestias, aperiam dignissimos excepturi dolores? Recusandae, perferendis necessitatibus autem doloribus, sapiente iusto itaque? Quo sequi delectus dolorum, quia praesentium maiores. Eveniet, deserunt saepe? Voluptatibus atque officia rem nostrum, quam perferendis, quis ratione iusto vitae quae enim possimus ducimus architecto cumque repellendus ipsum, esse ex magni nesciunt itaque animi. Aliquam labore consectetur laboriosam minus illo at nobis, delectus, voluptas? Ut doloribus cumque, maxime fuga reprehenderit officiis provident quaerat dignissimos unde nemo ipsam itaque expedita, labore at. Fugiat porro nam laborum maxime veritatis neque explicabo placeat repellendus quisquam quo, nemo, enim facilis fugit.</p>

<section id="middle">
    <img src="https://images4.alphacoders.com/653/653563.jpg">
</section>