CSS行内元素和块级元素的居中

一.水平居中　　

　　行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可;

　　对于块级元素有以下几种居中方式:　　

　　1.将元素放置在table中,再将table的margin-left和margin-right设置成auto,将table居中,使在其之中的块级元素叶居中,但是这种方式不符合语义化标签的规范;　　

　　2.将块级元素转换行内元素(通过设置display:inline)后再居中.这种方式使居中元素变成行内元素而致使无法设置宽高;　　

　　3.设置父元素float:left,position:relative,left:50%;子元素float:left,position:relative,left:-50%,利用相对布局的方式居中.上面三种方式各有优劣,依使用情景具体选择.

二.垂直居中　　

　　1.对于知道高度的元素可以设置上下padding相等;　　

　　2.设置line-height和height相等　　

　　3.利用vertical-align,但是这属性只在tr,td中适用,故可将元素放置入table中在居中

源码

   <!-- 水平居中 -->
       <!-- 行內元素居中只需在父元素中設置text-align即可 -->
       <div class="father">
           <p class="blockCenter">
               hehe</p>
       </div>
       <!-- table居中 -->
       <table class="tableclass">
           <tr>
              <td>
                  <ul class="ulclass">
                      <li><a href="#">呵</a></li>
                  </ul>
              </td>
          </tr>
      </table>
      <table class="tableclass">
          <tr>
              <td>
                  <ul class="ulclass">
                      <li><a href="#">呵</a></li>
                      <li><a href="#">呵</a></li>
                      <li><a href="#">呵</a></li>
                  </ul>
              </td>
          </tr>
      </table>
      <table class="tableclass">
          <tr>
              <td>
                  <ul class="ulclass">
                      <li><a href="#">呵</a></li>
                      <li><a href="#">呵</a></li>
                      <li><a href="#">呵</a></li>
                      <li><a href="#">呵</a></li>
                      <li><a href="#">呵</a></li>
                  </ul>
              </td>
          </tr>
      </table>
      <!-- 將塊級元素變為行內元素在居中 -->
      <ul style="{text-align: center}">
          <li style="{display: inline}">nihao </li>
      </ul>
      <!-- 利用相對佈局 -->
      <ul class="relativeCenterFather">
          <li class="relativeCenterChild">你好 </li>
      </ul>
 
      <!-- 豎直居中-->
      <!-- .設置相同的上下padding -->
      <!--  .父元素height和line-height相同 -->
      <hr />
      <div style={background:#;width:500px;color:#fff;line-height:100px;text-align:center}>
          我要來場說走就走的旅行
      </div>
      <!--. vartical-align,這屬性只對tr,td起作用 -->
      <table>
          <tr verticla-align="center" height="" background="#FF00FF">
              <td>一弦一柱思華年</td>
          </tr>
      </table>

css样式

 <style type="text/css">
     .father
     {
         width:500px;
     }
     .inlineCenter
     {
         text-align:center;
         float:left;
     }
     .blockCenter
     {
         width:100px;
         margin-left:auto;
         margin-right:auto;
         text-align:"center"
     }
     .tableclass
     {
         margin-left:auto;
         margin-right:auto;
     }
     .ulclass
     {
         list-style:none;
         margin:;
         padding:;
     }
        .ulclass li
        {
            float:left;
            display:inline;
            text-align:center;
        }
        .ulclass li a
        {
            text-align:center;
            float:left;
            background:#316AC5;
            color:#fff;
        }
     .ulclass li a:hover
     {
         background:#fff;
         color:#316AC5;
     }
 
     .relativeCenterFather
     {
         float:left;
         position:relative;
         left:50%
     }
     .relativeCenterChild
     {
         float:left;
         position:relative;
         left:-50%;
     }
 
     /* 豎直居中*/
     .wrap
     {
         background:#000;
         width:500px;
         color:#fff;
         height:100px;
         line-height:100px;
     }
 </style>