块级元素水平居中的问题

2018-07-09 13:47:38来源：博客园阅读 ()

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>块级元素居中问题</title>
  <style type="text/css">
         .one{
           width:100px;
           margin:0 auto;
           background:#ff6699;
         }
         .two{
            margin:0 auto;
            background:#ff3366;
         }
         .t-parent{
           text-align:center;
         }
         .three{
           display:inline;
           background:#3333ff;
         }

         .f-parent{
           position:relative;
           float:left;
           left:50%;
         }
         .four{
           position:relative;
           left:-50%;
           background:#000033;
         }
  </style>
 </head>
 <body>
      <!--给宽度 直接设置margin:0 auto;-->
     <div  class="one">定宽块级元素水平居中</div>
      <!--table 标签是根据里面的文本来撑开的  有文字就有宽度
            在设置 margin:0 auto;-->
     <table class="two">
         <tr>
             <td>    <div >不定宽块级元素水平居中</div></td>
         </tr>
     </table>
     <!--父元素 设置 text-align:center  子元素 设置为inline-->
      <div class="t-parent">
     <div class="three">不定宽块级元素水平居中</div>
     </div>
     <!--
         父元素设置
         position:relative;
         float:left;
         left:50%;
         子元素设置
         position:absolute;
         float:-50%;
        
     -->
     <div class="f-parent">
     <div class="four">不定宽块级元素水平居中</div>
     </div>
 </body>
</html>