1、水平居中设置-行内元素

通过父元素设置 1 text-align:center; ，让父元素的内容居中

2、水平居中设置-定宽块状元素

块状元素的宽度width为固定值，通过设置“左右margin”值为“auto”来实现居中的

例子：

CSS Code 复制内容到剪贴板 <!DOCTYPE HTML>     <html>     <head>     <meta http-equiv= "Content-Type"   content = "text/html; charset=utf-8" >     <title>定宽块状元素水平居中</title>     <style>     div{          width :  200px ; /*固定的宽度*/           margin :  20px   auto ; /*左右margin设置为auto*/           border :  1px   solid   red ;     }     </style>     </head>     <body>     <div>我是定宽块状元素，我要水平居中显示。</div>     </body>     </html>  

3、水平居中设置-不定宽块状元素
 
方法1. 加入 table 标签

例子：

XML/HTML Code 复制内容到剪贴板 <!DOCTYPE HTML>   < html >    < head >    < meta   charset = "utf-8" >    < title > 不定宽块状元素水平居中 </ title >    < style >    table{        margin:0 auto;    }    /*下面是任务区代码*/    .wrap{        background:#ccc;    }    </ style >    </ head >    < body >    < table >       < tbody >         < tr > < td >             < div   class = "wrap" >                我要水平居中               </ div >         </ td > </ tr >       </ tbody >    </ table >       </ body >    </ html >   

方法2. 设置 display:inline; 方法，与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置

例子：

CSS Code 复制内容到剪贴板 <!DOCTYPE HTML>    <html>    <head>    <meta charset= "utf-8" >    <title>不定宽块状元素水平居中</title>    <style>    .container{ text-align : center ;}    .container ul{ list-style : none ; margin :0; padding :0; display : inline ;}    .container li{ margin-right : 8px ; display : inline ;}    </style>    </head>       <body>    <div class= "container" >        <ul>            <li><a href= "#" >1</a></li>            <li><a href= "#" >2</a></li>            <li><a href= "#" >3</a></li>        </ul>    </div>    </body>    </html>  

方法3. 设置  position:relative  和  left:50% 利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

例子：

XML/HTML Code 复制内容到剪贴板 <!DOCTYPE HTML>   < html >    < head >    < meta   charset = "utf-8" >    < title > 不定宽块状元素水平居中 </ title >    < style >    /*下面是代码任务区*/    .wrap{        clear:both;        float:left;        position:relative;        left:50%        }    .wrap-center{        background:#ccc;        position:relative;        left:-50%;    }    </ style >    </ head >       < body >    <!--下面是代码任务区-->    < div   class = "wrap" >         < div   class = "wrap-center" > 我们来学习一下这种方法。 </ div >    </ div >    </ body >    </ html >   

以上这篇浅谈css处理水平居中的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。