HTML水平居中方法

一：对于行内元素采用text-align:center;的方式

二：采用margin:0 auto;来实现水平居中显示

三：用table实现

四；块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示

五：父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分

六:采用CSS3的flexbox，display:flex;

七：用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中

 

下面是讲解的具体的代码：

 

 
    1. <!DOCTYPE html>  
    2. <!--  
    3. To change this license header, choose License Headers in Project Properties.  
    4. To change this template file, choose Tools | Templates  
    5. and open the template in the editor.  
    6. -->  
    7. <html>  
    8.     <head>  
    9.         <title>css的水平居中</title>  
    10.         <meta charset="UTF-8">  
    11.         <meta name="viewport" content="width=device-width">  
    12.         <style type="text/css">  
    13.             #page{  
    14.                 width: 100%;  
    15.                 color: white;  
    16.             }  
    17.             .he{  
    18.                 width: 100%;  
    19.                 height: 100px;  
    20.                 background: #625050;  
    21.                 text-align: center;  
    22.                 line-height: 100px;  
    23.             }  
    24.             .bo{  
    25.                 width: 100%;  
    26.                 background: #6aa087;  
    27.             }  
    28.             .fo{  
    29.                 height: 100px;  
    30.                 background: #2f5d34;  
    31.             }  
    32.             .content{  
    33.                 height: 100px;  
    34.                 border: 2px solid #fff;  
    35.             }  
    36.             .content1{  
    37.                 background: #66a05c;  
    38.                 text-align: center;  
    39.             }  
    40.             .content2{  
    41.                 background: #8a5841;  
    42.                 text-align: center;  
    43.             }  
    44.             .content2Bo{  
    45.                 height:50px;  
    46.                 width: 60%;  
    47.                 border: 2px solid red;  
    48.                 line-height: 50px;  
    49.                 margin: 0 auto;  
    50.             }  
    51.             .content3{  
    52.                 background: #2f5d34;  
    53.             }  
    54.             table{  
    55.                 margin: 0 auto;  
    56.             }  
    57.             .content4{  
    58.                 background: #8a5841;  
    59.                 text-align: center;  
    60.             }  
    61.             .contentBo4{  
    62.                 display: inline;  
    63.             }  
    64.             ul li{  
    65.                 list-style-type: none;  
    66.             }  
    67.             .content5{  
    68.                 float: left;  
    69.                 position: relative;  
    70.                 left: 50%;  
    71.             }  
    72.             .contentBo5{  
    73.                 position: relative;  
    74.                 left: -50%;  
    75.                 background: #231b40;  
    76.             }  
    77.             .content6{  
    78.                 width: 100%;  
    79.                 text-align: center;  
    80.                 background: #9ca05c;  
    81.                 display: flex;  
    82.                 align-items: center;  
    83.                 justify-content: center;  
    84.             }  
    85.             .content7{  
    86.                 position: relative;  
    87.             }  
    88.             .contentBo7{  
    89.                 position: absolute;  
    90.                 left: 0;  
    91.                 right: 0;  
    92.                 width: 80%;  
    93.                 border: 2px solid red;  
    94.                 margin: 0 auto;  
    95.                 text-align: center;  
    96.             }  
    97.         </style>  
    98.     </head>  
    99.     <body>  
    100.         <div id="page">  
    101.             <div class="he">  
    102.                 <h1>下面是对元素水平居中对齐的几个例子以及说明</h1>  
    103.             </div>  
    104.             <div class="bo">  
    105.                 <div class="content content1">  
    106.                     这是内容区一：实现对行内元素的水平居中显示 采用text-align:center;的方式。  
    107.                 </div>  
    108.                 <div class="content content2">  
    109.                     <div class="content2Bo">  
    110.                         这是内容区二:红色区域部分采用margin:0 auto;来实现水平居中显示，当然要写好元素的宽度。  
    111.                     </div>  
    112.                 </div>  
    113.                 <div class="content content3">  
    114.                     <table><tbody><tr><td>  
    115.                                     这是内容区三：用table实现。  
    116.                                 </td></tr></tbody></table>  
    117.                 </div>  
    118.                 <div class="content content4">  
    119.                     <ul class="contentBo4">  
    120.                         <li>这是第一行</li>  
    121.                         <li>这是第二行</li>  
    122.                         <li>这是内容区四：本来是contentBo4的块级的元素但是通过转换成行内元素来实现块级元素的水平居中显示。</li>  
    123.                     </ul>  
    124.                 </div>  
    125.                 <div class="content5">  
    126.                     <div class="content contentBo5">  
    127.                         这是内容区五：父子元素都采用相对定位，父元素left:50%;子元素left:-50%;相对自己的长度减回50%，这样实现向右偏移后拉回多的部分。  
    128.                     </div>  
    129.                 </div>  
    130.                 <div class="content content6">  
    131.                     这是内容区六:采用css3的flexbox，display:flex;  
    132.                 </div>  
    133.                 <div class="content content7">  
    134.                     <div class="contentBo7">  
    135.                         这是内容区七:用父元素的 display:relative;直接采用position:absolute;left:0;right:0;margin:auto来实现水平以居中。  
    136.                     </div>  
    137.                 </div>  
    138.             </div>  
    139.             <div class="fo">  
    140.                 <pre> 总结下：其实实现水平居中只有一下几种思路：  
    141.                     1：对于最简单的行内元素的居中采用text-align:center;设置即可。  
    142.                     2：对于最普通的水平居中采用绝对定位后设置left：50%;后再采用各种方式去实现自身水平差的补回。  
    143.                     3：对于普通的元素对齐还可以采用绝对定位后left:0;right:0;加上元素的宽度，在此基础之上就可以采用margin:auto;实现水平对齐了。  
    144.                     4：用css3的Flexbox属性  
    145.                     5:在元素外嵌套table实现，但是这样会有很多层嵌套   
    146.                     6：marin:0 auto;方便的实现已知宽度的水平居中  
    147.                 </pre>  
    148.             </div>  
    149.         </div>  
    150.     </body>  
    151. </html>  
posted @ 2017-06-26 11:34  丿丶大灬咖  阅读(816)  评论(0)  编辑  收藏  举报