CSS 学习笔记01 wrapper class实现居中

div内容居中

<!-- DESKTOP NAVIGATION  -->
<nav class="top-bar">
  <div class="wrap">
    <div class="top-bar-left">
      <h3>site title</h3>
    </div>
    <div class="top-bar-right">
      <ul class="menu">
        <li><input type="search" placeholder="Search"></li>
        <li><button type="button" class="button">Search</button></li>
      </ul>
    </div>
  </div>
</nav>

.wrap{
    width: 90%; 
    margin: 0 auto;
    max-width: 1000px;
}

1.用百分号的好处就是能够实时计算

2.margin用于自动保持边距使得内容居中

3.max-width规定了居中内容的宽度（极有用）