我如何将所有元素居中？

Question

我不确定如何使主容器 ("main") 居中？ div 框需要居中但卡在左侧。我希望在整体 space 和主要 div 部分之间保持一定的边距，但我不想限制它向左对齐？

我还在学习CSS。任何关于布局或我如何完成编码的反馈都将受到赞赏。非常感谢。

<!DOCTYPE html>
 <html>
   <head>
    <meta charset="utf-8">
    <title>Business Title</title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />
   <header>
    <img class="mainImage" src="image/logo.png">
   </header>
  </head>

<body>
<div class="main">
  <h1>Simple Business.</h1>

<ul>
  <li><a href="#1">I need Option 1.</a></li>
  <li><a href="#2">I just need Option 2.</a></li>
  <li><a href="#3">I just need Option 3.</a></li>
  <li><a href="#4">I need Option 4.</a></li>
</ul>

  <footer>
  <h1>About THIS BUSINESS.</h1>
  <p class="about"> Insert About Text Here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vitae dolor nibh. Ut at pulvinar ex. Cras nibh ante, iaculis quis aliquet at, placerat quis enim. In maximus nulla ut commodo sollicitudin. Etiam a erat laoreet augue tempus pellentesque. Fusce tempor sed urna in cursus. Sed lectus leo, tempor sed magna quis, maximus vulputate velit. Ut non pellentesque arcu, quis placerat magna. Cras ac odio in leo egestas convallis. Nunc egestas pulvinar placerat. 
  </p>
</footer>
</div>
  <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>

  <script src="js/index.js"></script>

</body>

</html>
----------

**CSS:**

/******************************************
/* SETUP                   
/*******************************************/

/* Box Model Hack */
* {
 -moz-box-sizing: border-box; /* Firexfox */
 -webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
 box-sizing: border-box; /* IE */
}

/* Clear fix hack */
.clearfix:after {
 content: ".";
 display: block;
 clear: both;
 visibility: hidden;
 line-height: 0;
 height: 0;
}

.clear {
  clear: both;
}

.alignright {
    float: right; 
    padding: 0 0 10px 10px; /* note the padding around a right floated image */
}

.alignleft {
    float: left; 
    padding: 0 10px 10px 0; /* note the padding around a left floated image */
}

/******************************************
/* BASE STYLES                   
/*******************************************/

body {
     color: #000;
     background-color: #ececec;
     font-size: 12px;
     line-height: 1.4;
     font-family: Helvetica, Arial, sans-serif;
     text-align: center;
}

h1 {
     font-family:'Arial Black';
     font-size: 4em;
     padding-top: 5px;
}

li {
     text-decoration: none;
     font-size: 2em;
     line-height: 2.5em;
     color: #FF48D0;
}

ul {
  list-style: none;
  padding: 0; 
}

.mainImage {
     width:75%;
     max-width:483px;
}

a:active, a:hover {outline: 0 none; text-decoration: none;}
a {text-decoration: none}

/******************************************
/* LAYOUT                   
/*******************************************/

.main {
     background-color: #FFF;
     margin:1em;
     margin-left: 2em;
     margin-right: 2em;
     float: center;
     max-width: 960px;

}

.about, p {
     float:center;
     max-width: 960px;
     padding-left: 1em;
     padding-right: 1em;
     text-align: justify;
 }

header {
 padding:10px;
}

footer {
 padding: 5px;
}

/******************************************
/* ADDITIONAL STYLES                   
/*******************************************/

/* =======================================================================
   Media Queries
   ========================================================================== */

@media only screen and (max-width: 930px) {

 .main {
   max-width: 95%;
margin: 0 auto; 
   text-align:center;
   padding-bottom: 1.5em;
float: none;
 }

 h1 {
      font-size: 2.5em;
      text-align: center;
   }

 li {
      font-size: 2em;
      line-height: 2.5em;
 }
}


@media only screen and (max-width: 480px) {
  .main {
     max-width: 95%;
  }

  h1 {
     font-size: 2em;
     text-align: center;
  }

  li {
     font-size: 1.4em;
 line-height: 2em;
  }

}

Answer 1

您只需将 margin: 0 auto; 添加到该元素的 css。

像这样：

.main {
    margin: 0 auto; 
}

这将使元素自动居中于用户浏览器。

CSS Margins

Answer 2

使用 CSS 使元素居中的经典方法是将左右边距设置为 auto

您的代码应该是

.main {
    background-color: #FFF;
    margin: 1em auto;
    max-width: 960px;
}

Answer 3

.main {
  background-color: #FFF;
  max-width: 960px;
  display: table;
  margin: 0 auto;
}

Fiddle: Demo

我如何将所有元素居中？

How do I center all my elements?

html

css

layout