脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

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

  发布时间：2016-09-08 10:08:38   作者：佚名   我要评论
下面小编就为大家带来一篇CSS水平居中总结(新手必看篇)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

行内元素

如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 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水平居中总结(新手必看篇)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

相关文章

  • 浅谈css处理水平居中的问题

    下面小编就为大家带来一篇浅谈css处理水平居中的问题。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，祝大家游戏愉快哦
    2016-09-04

  • Flexbox制作CSS布局实现水平垂直居中的简单实例

    下面小编就为大家带来一篇Flexbox制作CSS布局实现水平垂直居中的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-07-27

  • 关于css水平居中的小小探讨

    下面小编就为大家带来一篇关于css水平居中的小小探讨。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-29

  • css水平居中的各种方法总结(推荐)

    下面小编就为大家带来一篇css水平居中的各种方法总结(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-06-03

  • 浅析CSS实现水平垂直同时居中的5种思路

    下面小编就为大家带来一篇浅析CSS实现水平垂直同时居中的5种思路。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
    2016-04-28

  • CSS实现水平居中的4种思路简要概述

    水平居中是经常遇到的问题。看似方法较多，条条大路通罗马。但系统梳理下，其实都围绕着几个思路展开。本文将介绍关于水平居中的4种思路，感兴趣的朋友参考下吧
    2016-04-27

  • css三种方法实现div在浏览器水平居中

    这篇文章主要介绍了css三种实现div在浏览器水平居中的方法，感兴趣的小伙伴们可以参考一下
    2016-04-14

最新评论

关注微信公众号

扫一扫