CSS水平居中总结(新手必看篇)

前端  /  管理员 发布于 7年前   137

行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。

html代码：

XML/HTML Code复制内容到剪贴板
  1. <body>    
  2.   
  3. <div class="txtCenter">我想要在父容器中水平居中显示。</div>    
  4.   
  5. </body>  

css代码：

CSS Code复制内容到剪贴板
  1. <style>     
  2.   
  3. .txtCenter{   
  4.   
  5.     text-align:center;     
  6.   
  7. }    
  8.   
  9. </style>  

块状元素

定宽块状元素

定宽块状元素：块状元素的宽度width为固定值。

满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

html代码：

XML/HTML Code复制内容到剪贴板
  1. <body>     
  2.   
  3. <div>我是定宽块状元素，哈哈，我要水平居中显示。</div>    
  4.   
  5. </body>  

css代码：

CSS Code复制内容到剪贴板
  1. <style>    
  2.   
  3. div{       
  4.   
  5.     border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/           
  6.   
  7.     width:200px;/*定宽*/       
  8.   
  9.     margin:20px auto;/* margin-left 与 margin-right 设置为 auto */    
  10.   
  11. }    
  12.   
  13.  </style>  

也可以写成：

CSS Code复制内容到剪贴板
  1. margin-left:auto;    
  2.   
  3. margin-right:auto;  

注意：元素的“上下 margin” 是可以随意设置的。

不定宽块状元素

1. 加入 table 标签

利用table标签的长度自适应性---即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

html代码：

XML/HTML Code复制内容到剪贴板
  1. <div>  
  2.  <table>  
  3.    <tbody>  
  4.      <tr><td>  
  5.      <ul>  
  6.          <li>我是第一行文本</li>  
  7.          <li>我是第二行文本</li>  
  8.          <li>我是第三行文本</li>  
  9.      </ul>  
  10.      </td></tr>  
  11.    </tbody>  
  12.  </table>  
  13. </div>  

css代码：

CSS Code复制内容到剪贴板
  1. <style>    
  2.     table{   
  3.         border:1px solid;    
  4.         margin:0 auto;    
  5.     }    
  6. </style>  

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

改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。如下例子：

html代码：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <div class="container">  
  3.     <ul>  
  4.         <li><a href="#">1</a></li>  
  5.         <li><a href="#">2</a></li>  
  6.         <li><a href="#">3</a></li>  
  7.     </ul>  
  8.  </div>  
  9. </body>  

css代码：

CSS Code复制内容到剪贴板
  1. <style>    
  2. .container{   
  3.     text-align:center;   
  4.  }    
  5. /* margin:0;padding:0（消除文本与div边框之间的间隙）*/    
  6. .container ul{   
  7.     list-style:none;   
  8.     margin:0;   
  9.     padding:0;   
  10.     display:inline;   
  11.  }    
  12. /* margin-right:8px（设置li文本之间的间隔）*/    
  13. .container li{   
  14.     margin-right:8px;   
  15.     display:inline;   
  16.  }   
  17.  </style>  

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

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

代码如下：

XML/HTML Code复制内容到剪贴板
  1. <body>  
  2.  <div class="container">  
  3.     <ul>  
  4.         <li><a href="#">1</a></li>  
  5.         <li><a href="#">2</a></li>  
  6.         <li><a href="#">3</a></li>  
  7.     </ul>  
  8.  </div>  
  9. </body>  

css代码：

CSS Code复制内容到剪贴板
  1. <style>    
  2. .container{   
  3.     float:left;   
  4.    position:relative;   
  5.   left:50%    
  6. }    
  7.  .container ul{   
  8.     list-style:none;   
  9.     margin:0;   
  10.     padding:0;   
  11.     position:relative;   
  12.     left:-50%; }    
  13. .container li{   
  14.     float:left;   
  15.     display:inline;   
  16.     margin-right:8px;   
  17. }   
  18. </style>  

还有一种方法：

CSS Code复制内容到剪贴板
  1. .container{   
  2.   
  3.     position: absolute;   
  4.     top:50%;   
  5.     left:50%;   
  6.   
  7.     margin:-170px -250px; /*container宽500px，高340px*/  
  8.   
  9. }  

以上这篇CSS水平居中总结(新手必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持。


  • 上一条：
    CSS3按钮鼠标悬浮实现光圈效果源码
    下一条：
    css关于position属性的用法详解(绝对定位和相对定位的混淆)

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客