HTML+CSS入门块级元素水平居中的问题-职坐标

HTML+CSS入门块级元素水平居中的问题

沉沙 2018-09-18 来源：阅读 644 评论 0

摘要：本篇教程介绍了HTML+CSS入门块级元素水平居中的问题，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

本篇教程介绍了HTML+CSS入门块级元素水平居中的问题，希望阅读本篇文章以后大家有所收获，帮助大家HTML+CSS入门。

<!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>
      
     <div  class="one">定宽块级元素水平居中</div>
      
     <table class="two">
         <tr>
             <td>    <div >不定宽块级元素水平居中</div></td>
         </tr>
     </table>
     
      <div class="t-parent">
     <div class="three">不定宽块级元素水平居中</div>
     </div>
     
     <div class="f-parent">
     <div class="four">不定宽块级元素水平居中</div>
     </div>
</body>
</html>