我希望幻灯片放映在页面的中心，并显示在标题1上方，而html在下方；
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
<style>
body {
background-color: #D2D2D2;"
}
div {
transform: opacity 3s;
opacity: 1;
}
.hidden {
opacity: 0;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #111;
}
.active {
background-color: #4CAF50;
}
p.one {
border: 1px lightgrey;
background-color: lightgrey;
padding-top: 50px;
padding-right: 30px;
padding-bottom: 40px;
padding-left: 0px;
}
IMG.displayed {
display: block;
margin-left: auto;
margin-right: auto
}
@keyframes fade {
0% { opacity: 0; }
11.11% { opacity: 1; }
33.33% { opacity: 1; }
44.44% { opacity: 0; }
100% { opacity: 0; }
}
.fadein { position:relative; height:332px; width:500px; outline: 1px solid blue; }
.fadein img { position:absolute; left:0; right:0; opacity:0; animation-name: fade; animation-duration: 9s; animation-iteration-count: infinite; }
.fadein img:nth-child(1) { animation-delay: 0s; }
.fadein img:nth-child(2) { animation-delay: 3s; }
.fadein img:nth-child(3) { animation-delay: 6s; }
</style>
</head>
<body>
<div class="wrapper fade-in">
<ul>
<li><a href="home">Home</a></li>
<li><a href="Our Routes>Our Routes</a></li>
<li><a href="contact">Contact</a></li>
<li><a class="active" href="about">About</a></li>
</ul>
<div class="fadein">
<img src="4">
<img src="3>
<img src="2">
<img src="1">
</div>
<h1 align="center"> About Us </h1>
<p class="one", align="center"> Text
</p>
<p class="one", align="center">Text</p>
</div>
</body>
</html>将其放在代码框中时出现了一些问题，但认为显示了重要的位，它也在询问更多详细信息，但想不出其他东西了哈哈:)
谢谢！
最佳答案
添加以下内容：
.fadein {
position: relative;
height: 332px;
width: 500px;
outline: 1px solid blue;
margin: auto;
}
margin:auto;将幻灯片放到中间。