我想在中间显示我的页面（宽度：80%自动；）我正在使用center类，但它不起作用。有人能告诉我如何显示我的页面吗？两边都留20%的空白。
这是我的源代码（HTML）
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
<title>GR PROVIDER</title>
</head>
<body>
<div class="wrapper">
<div class="center">
<div class="Header">
<div class="heading">
<h2> Gulf Resources Provider </h2>
</div>
<div class="socialmedia">
<ul>
<li> <a href=""> <img src="GRProvider/Facebook.jpg"> </a> </li>
<li> <a href=""> <img src="GRProvider/LinkedIn.jpg"></a> </li>
<li> <a href=""> <img src="GRProvider/Google.jpg"> </a> </li>
<li> <a href=""> <img src="GRProvider/Twitter.jpg"> </a> </li>
</ul>
</div>
</div>
<div class="images">
<div class="pics">
<img src="GRProvider/Img.jpg" />
</div>
<div class="pics">
<img src="GRProvider/Img_2.jpg"/>
</div>
</div>
<div class="diagram">
<div class="sample">
<img src="GRProvider/Img_3.jpg"/>
</div>
<div class="sample">
<img src="GRProvider/Img_4.jpg"/>
</div>
</div>
<div class="main_content">
<div class="navigation">
<ul>
<li> <a href="#"> HOME </a> </li>
<li> <a href="#"> ABOUT US </a> </li>
<li> <a href="#"> CAREER </a> </li>
<li> <a href="#"> CONTACT US </a> </li>
</ul>
</div>
<div class="Slider">
<div class="slider_img">
<img src="GRProvider/Slider.jpg">
</div>
</div>
</div>
<div class="Info">
<div class="About_Us">
<p> Lorem Ipsum is simply dummy text of the printing and typesetting indutry. Lorem Ipsum has been
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has bee
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has Lorem Ipsum is simply dummytextoftheprintingandtypesettingindustry.LoremIpsum............. </p>
</div>
<div class="button">
<button type="button"> READ MORE </button>
</div>
</div>
<div class="content">
<div class="text">
<img src="GRProvider/Img_4.jpg" />
<h4> PRODUCT INFORMATION </h4>
<h5> consectetur adipiscing elit. Etiam tristique tristique any
varius. Donec nec vestibulum ligula. Aenean turpis do
feugiat a luctus in, rhoncus risus. Maecenas duivitae
consequat massa imperdietut. elit ut tempus lobortis,
eros leo molestie velit, nonegestas augue nulla </h5>
</div>
<div class="text">
<img src="GRProvider/Img_5.jpg" />
<h4> PRODUCT INFORMATION </h4>
<h5> consectetur adipiscing elit. Etiam tristique tristique any
varius. Donec nec vestibulum ligula. Aenean turpis do
feugiat a luctus in, rhoncus risus. Maecenas duivitae
consequat massa imperdietut. elit ut tempus lobortis,
eros leo molestie velit, nonegestas augue nulla </h5>
</div>
<div class="text">
<img src="GRProvider/Img_6.jpg" />
<h4> PRODUCT INFORMATION </h4>
<h5> consectetur adipiscing elit. Etiam tristique tristique any
varius. Donec nec vestibulum ligula. Aenean turpis do
feugiat a luctus in, rhoncus risus. Maecenas duivitae
consequat massa imperdietut. elit ut tempus lobortis,
eros leo molestie velit, nonegestas augue nulla </h5>
</div>
</div>
<div class="footer">
<h6> Copyright by Bitsprovider.com </h6>
</div>
</div>
</div>
</body>
</html>
这是我的CSS代码（mystyle.CSS）
* {
margin: 0;
padding: 0;
}
body {
background-color: #1e93a5;
width: 80% auto;
}
.wrapper {
float: left;
width: 100%;
}
.center {
float: left;
width: 80% auto;
}
.header {
float: left;
width: 100%;
}
.heading {
float: left;
width: 70%;
}
h2 {
color: #fff;
padding: 0 25%;
}
.socialmedia {
float: left;
width: 30%;
}
.images {
display: inline-block;
float: left;
width: 18%;
}
.pics img {
display: inline-block;
width: 100%;
}
.diagram {
display: inline-block;
float: right;
width: 18%;
}
.sample img {
width: 100%;
}
.main_content {
float: left;
position: static;
width: 60%;
}
.navigation {
float: left;
width: 100%;
}
.navigation > ul {
float: left;
width: 100%;
}
.navigation > ul li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 25%;
}
.navigation > ul li a {
background-color: #2dacbe;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.slider {
float: left;
width: 1%;
}
.slider > img {
width: 139%;
}
ul {
float: left;
width: 100%;
}
li {
float: left;
list-style: outside none none;
text-decoration: none;
width: 11%;
}
a {
border: 1px solid #0e8393;
color: black;
float: left;
text-align: center;
text-decoration: none;
width: 100%;
}
.info {
float: left;
width: 100%;
}
.About_Us {
float: left;
width: 100%;
}
p {
background-color: #2ea4b6;
color: #fff;
float: left;
text-align: justify;
width: 100%;
}
.button {
float: right;
}
.content {
float: left;
width: 100%;
}
.text {
float: left;
width: 33%;
}
.text > img {
}
h4 {
background-color: #263270;
color: #fff;
width: 93%;
}
h5 {
color: #fff;
width: 100%;
}
.footer {
float: left;
width: 100%;
}
h6 {
color: #fff;
text-align: center;
}
1-删除所有float:left;。2-删除div包装器3-在内容上设置80%的宽度，并使用margin: 0 auto;
删除不必要的div，只需要两个就可以实现您正在做的事情。不要使用body进行布局，因为使用它可能会犯很多不必要的错误。
在下面的CSS代码中，body只设置背景色，wrapper浮动在中间，两边都有20%的边距，你可以随心所欲地使用标题。
请不要使用float，直到你发现真正需要使用它。阅读w3schools优秀的CSS教程。http://www.w3schools.com/css/
body {
background-color: #1e93a5;
}
.wrapper {
width: 60%;
margin: 0 auto; // Shortcode for Margin: 0 (top), auto (right), 0 (bottom), auto (left)
}
.header {
width: 100%;
}
使用margin: auto，width: 80% auto不会像您想象的那样使容器居中。此外，你的wrapper类对我来说似乎很无用。你不需要所有这些float: left s。
要使div在页面上居中，请使用css
左边距：自动；右侧边距：自动；
去掉任何其他不必要的东西，你不需要它们。如果有效，请告诉我。