我想很多在前端学习或者开发过程中，肯定会遇到如何让你的元素居中的问题，网上google肯定会有很多的解决方法。今天我就个人的项目与学习经验谈谈个人理解css如何让元素居中。

要理解css的居中，首先必须理解css的元素分类以及css的盒模型(box model)。

a. 元素分类。

在css中把元素分为块级元素、内联元素以及内联块级元素。

块级元素最明显的特征就是: { display: block; } 。块级元素独占一行，默认情况元素的width默认为100%，但可以修改元素的height, width等样式；例如html中的<div>, <p>, <ul>, <li>, <hx>, <form>等。

内联元素最明显的特征是 { display: inline; } 。也叫行内元素，可以与其他行内元素共享一行，但是其height, width, margin-top, margin-bottom均不可设置。例如html中的<span>, <a>, < label>, <input>等。

内联块级元素，也就是行内块级元素 { display: inline-block; } 。顾名思义，内联块级元素既有块级元素的特征，也有内联元素的特征。也就是inline-block可以与其他元素共享一行，也可以设置height, width等样式。

b. 盒模型(box model)。

在css中，所有的元素都有盒模型，打开chrome审查任何一个网页的元素都会看到一个盒模型。

图1. css盒模型

正如图1所示，一个盒模型有margin, border, padding以及盒子本身的尺寸(height, width)，从字面量上通俗地讲就是（多个）盒子的间距、盒子的边框、盒子内的填充、以及盒子的宽、高。我们可以通过css修改这些样式，例如：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         div{

             width: 300px;

         }

         div.box-model{

             margin: 10px;

             padding: 10px;

             border: solid 2px;

             width: 100px;

             height: 60px;

             display: inline-block;

             background: #999;

         }

     </style>

 </head>

 <body>

     <div>

         <div class="box-model">div1</div>

         <div class="box-model">div2</div>

         <div class="box-model">div3</div>

         <div class="box-model">div4</div>

     </div>

 </body>

 </html>

           

　　　　　　　　　　　　　　图2. css盒模型样式的修改

接下来讲如何对一个元素进行居中：

1.水平居中：

1.1内联元素的居中

　　对内联元素居中只需要给其父元素设置  {text-align: center; }  即可；

2.2块级元素

　　2.2.1宽度固定；若块级元素的宽度是固定的可以同时设置其左右的边距 { margin-left: auto; margin-right: auto; } 为自动让其居中；

　　2.2.2宽度不定，我们在开发过程中，我们块级元素的宽度大多数是不固定的，对宽度未知的块级元素有很多种方法，现在主要讲一些方法，最主要的是其思想，大家一定要注意体会其思想。

　　　　a.利用<table>标签；将元素放在<td>中，给table增加样式 { margin-left: auto; margin-right: auto; }

　　　　b.将块状元素修改为内联元素利用内联元素的方法，即修改元素的 { display: inline; } ，并修改其父元素的 {text-align: center; } 。

　　　　c.给父元素设置float，并设置 { float:left; position:relative; left:50%; } ，在给该块级元素设置 { position:relative; left:-50%; } 即可。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style>

         .width-block{

             width: 200px;

             margin-left: auto;

             margin-right: auto;

             background: #9cc;

         }

         table{

             margin:0 auto;

         }

         table div{

             background: #9cc;

         }

         .float-father{

             float: left;

             position: relative;

             left: 50%;

         }

         .float{

             position: relative;

             left: -50%;

             background: #fcc;

         }

     </style>

 </head>

 <body>

     <div>

         <div class='width-block'>div center with width</div>

     </div>

     <table>

         <tbody>

             <tr>

                 <td>

                     <div>div center with table</div>

                 </td>

             </tr>

         </tbody>

     </table>

     <div class='float-father'>

         <div class='float'>

             div with float father

         </div>

     </div>

 </body>

 </html>

　　　　总结：

　　　　方法a：虽然实现了块级元素的居中，但是却增加了没有语义的标签。

　　　　方法b：改变了标签元素特性，使其成为了内联元素，使得其失去了块状元素的固有特性，如height, width等。

　　　　方法c：设置了position为relative，且改变了其层模型属性。

2.垂直居中：

2.1 父元素高度确定的情况下单行文本：只要设置其父元素的line-height与其高度一致即可；

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <style type="text/css">

         #div1{

             height: 100px;

             background: #fcc;

             line-height: 100px;

             border: solid;

         }

     </style>

 </head>

 <body>

     <div id='div1'>

         <div>single line text</div>

     </div>

 </body>

 </html>

2.2 父元素高度确定的多行文本

　　a. 利用<table>标签，css中有一个用于垂直居中的属性vertical-align，但是这个样式只有在table标签中的th或者td中才会生效。因此借助table标签可以使元素垂直居中；

 <table>

     <tbody>

         <tr>

             <td>

                 <div>

                     <div>text1</div>

                     <div>text2</div>

                     <div>text3</div>

                 </div>

             </td>

         </tr>

     </tbody>

 </table>
 td{

     height: 200px;

     vertical-align: middle;/*td默认为middle,可以不设置 */

     }

　　b. 利用 { display: table-cell; } ，其实也是跟方法a类似，这里是通过display来激活vertical-align属性，但是IE8以前的浏览器不支持table-cell。与a方法不同的是这里需要显示去设置 { vertical-align: middle; } 。

 <div id="table-cell">

     <div>div1</div>

     <div>div2</div>

     <div>div3</div>

     <div>div4</div>

 </div>
 #table-cell{

             display:table-cell;

             vertical-align:middle;

             height:200px;

             background:#fcc;

             border: solid;

         }

2.3高度不确定

可以设置父元素的padding对top和bottom一致 { padding-top: 50px; padding-bottom: 50px; }  来控制元素的垂直居中，但是必须是父元素能够设置padding-top和padding-bottom，也就是父元素为行内元素肯定不行。

 <div class='bypadding'>

     <div>div1</div>

     <div>div2</div>

     <div>div3</div>

     <div>div4</div>

 </div>
 .bypadding{

             padding:50px 0;

             border:solid;

             background: #fcc;

         }

总结，在常用CSS居中的解决方法中，我们需要理解css的块级元素、内联元素，并在解决过程中巧妙运用块级元素以及内联元素的特性，有时候可以借助table标签的特性。

文章地址：http://www.cnblogs.com/alvinwei1024/p/4616322.html

理解CSS居中的更多相关文章

  1. css居中小结

    从css入门就开始接触,无所不在的,一直备受争议的居中问题. css居中分为水平居中和垂直居中,水平居中方式也较为常见和统一,垂直居中的方法就千奇百怪了. 博客原文地址:Claiyre的个人博客 ht ...

  2. 深入理解CSS中的margin

    1.css margin可以改变容器的尺寸 元素尺寸 可视尺寸--标准盒子模型中盒子的宽度是不包括margin值的,clientWidth 占据尺寸--包括margin的宽度 outWidth不在标准 ...

  3. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记（一） web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  4. 理解CSS

    写在前面的话:对于web开发,html完成网页的structure,css完成网页的presentation,js完成网页的behavior,今天就来说一说css,通过理解一些css的基础概念,能够更 ...

  5. CSS居中demo

      <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&q ...

  6. 深入理解css BFC 模型

    如果要深入理解css布局的各种原理,要在重构页面做得心应手的话,那么你就必须先理解这玩意 "BFC" , BlockFormatting Context(块级格式化上下文): 这里 ...

  7. 深入理解CSS中的层叠上下文和层叠顺序(转)

    by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpress/?p=5115 零.世间的道 ...

  8. 深入理解CSS溢出overflow & overflow:hidden真的失效了吗[转载]

    深入理解CSS溢出overflow http://www.cnblogs.com/xiaohuochai/p/5289653.html overflow:hidden真的失效了吗 http://www ...

  9. css居中那点事儿

    css居中那点事儿 在css中对元素进行水平居中是非常简单的,然而使元素垂直居中就不是一件简单的事情了,多年以来,垂直居中已经成为了CSS领域的圣杯,因为它是极其常见的需求,但是在实践中却不是一件简单 ...

随机推荐

  1. Unieap3.5Java端通过SQL语句直接查询DataStore

    通过sql查询dataStore 例子见 /mcss/src/com/neusoft/mcss/base/todo/dao/WorkTodoDaoImpl.java getWorksTodo() ID ...

  2. 商业模拟游戏:<柠檬汁杰克>ios游戏源码

    首先柠檬汁杰克是我个人的首个cocos2d-x开发的游戏,本人虽然混迹编程十几年从未开发过游戏,这是首例. 我选这个游戏因为逻辑比较简单,也是一款苹果上的经典游戏.开发中我用到了CocoStudio, ...

  3. C#处理Excel

    C#处理Excel C#处理Excel 前言 OleDb 具体操作 NPOI 具体操作 Excel C# NPOI OleDb 前言 最近需要对Excel进行加密解密操作,本身是一个简单的事情,通过 ...

  4. 将ubuntu12.04中，gcc4.6/g++4.6版本降低到gcc4.4/g++4.4.

    降低Ubuntu中gcc和g++的版本 ubuntu 12.04 中带的gcc/g++都是4.6,将其降到4.4. 操作步骤如下: 一.降低gcc版本 1. $sudo apt-get install ...

  5. Copying Fields to a new Record

    This is a time saving tip for application designer. If you are creating a new record definition and ...

  6. JavaScript计算日期间隔以及结果错误（少一天）的解决方法

    下面的代码是之前从网上某个地方COPY下来的,之前一直用着,前段时间DateDiff()方法突然出问题了,输入两个日期2015-10-01 和 2015-10-02之后,计算出来的日期是0!如果只有几 ...

  7. sqoop的job工具

    sqoop job: Work with saved jobs 就是将sqoop的某条语句保存为一个job 1.把person表导入到HDFS上,可以使用下面的语句 sqoop import --co ...

  8. thinkphp foreach循环生成二维数组的方法

    先做个问题记录,另外下面是做的过程中遇到的一个没想明白的现象 foreach($result as $key => $val ){ $wzList[$key]['lik']=$val[0]; $ ...

  9. Ubuntu12.04卡死的解决方案

    刚开始安装的时候用着还行,不过后来发现用了一会总是会出现卡死的状况 后来看了下ubuntu12.04的内核是3.2,后来把内核升级到3.5发现这种情况不会出现了. 查看内核以及升级内核 uname - ...

  10. MIME类型

    多用途互联网邮件扩展(MIME,Multipurpose Internet Mail Extensions)是一个互联网标准,它扩展了电子邮件标准,使其能够支持非ASCII字符.二进制格式附件等多种格 ...