1    text-align: center;
只能对图片，按钮，文字等行内元素(display为inline或inline-block等)进行水平居中。在IE6、7中能对任何元素进行水平居中。另外它是把属性应用给容器，对内部所有内容起作用，所以不是很好控制，但方法兼容大多数浏览器用到的也很多。
<body>
<div id="mid">
              <table id="mid1">
                  <tr>
                      <td><input type="button" id="mid1_1" value="首页"/>
                         <input type="button" id="mid1_2" value="1"/>
                         <input type="button" id="mid1_3" value="2"/>
                         <input type="button" id="mid1_5" value="3"/>
                         <input type="button" id="mid1_6" value="4"/>
                         <input type="button" id="mid1_7" value="5"/>
                         <input type="button" id="mid1_8" value="6"/>
                         <input type="button" id="mid1_9" value="7"/></td>
 
                  </tr>
              </table>
</body>
css：
 
<style type="text/css">
 
        #mid1
        {
            padding: 0px;
            margin: 0px;
            width: 100%;
    border:#000 solid 1px;
    text-align: center;
 
 
        }
</style>
这里有个新手技巧就是如果你想要你tabl内部的元素平均分布居中就应该将所有的元素分别放在td内部如：
 
 <table id="mid1">
                  <tr>
                      <td><input type="button" id="mid1_1" value="首页"/></td>
                       <td>  <input type="button" id="mid1_2" value="1"/></td>
                      <td>   <input type="button" id="mid1_3" value="2"/></td>
                      <td>   <input type="button" id="mid1_5" value="3"/></td>
                      <td>   <input type="button" id="mid1_6" value="4"/></td>
                     <td>    <input type="button" id="mid1_7" value="5"/></td>
                      <td>   <input type="button" id="mid1_8" value="6"/></td>
                      <td>   <input type="button" id="mid1_9" value="7"/></td>
 
                  </tr>
  </table>
2单div对象布局居中的实现，对div盒子设置margin:0 auto样式即可实现居中。这个也是元素居中的首选，但是div必须设置宽度。大多数主流浏览器中，这种方法都非常有效和IE浏览器版本6.0以上支持。
 
div#container{margin-left:auto; margin-right:auto; width:200px;}
 
3使用绝对定位然后负相当于元素宽度一半的外边距让元素相对于页面居中
#container{background:#cf6; width:600px;  position:absolute; left:50%; margin-left:-300px; }
 
4使用浮动或绝对定位配合相对定位负元素宽度一半左定位居中。需要在外面多套一个div来装需要居中的元素，使他相对于父元素居中50%，但多出了居中元素的一半，然后设置居中元素负相对于多加的空div就是本身的宽度的一半定位，这样元素就居中了
<style type="text/css"> 
#y1{float:left;position:relative;left:50%;} 
.y2{background:#6cf;position:relative;left:-50%;} </style>
<div id="y1"> 
 <div class="y2">我就是即将居中的元素哈哈哈哈</div> </div>
 
5line-height让单行文字居中
把文字的line-height设置为父容器的高度。
 
6使用表格居中，默认表格就会对内容垂直居中，可以直接使用align：center；水平居中 valign：middle；垂直居中。才css中使用vertical-align：middle；可以实现垂直居中。
<table>
<tr>
<td width="200px" height="200px"  style=" border:1px solid #f00; vertical:middle; text-align:center;">
<div style="width:100px; height:100px; background:#000;"></div>
</td>
 
</tr>
</table>
 
7使用diplay：table-cell，模拟表格，使用表格的居中方法

<div style="display:table-cell; vertical-align:middle; text-align:center; width:200px; height:200px; border:1px solid #f00;">

<div style="width:50px; height:50px; background:#6cf; display:inline-block"></div>

</div>

 
 文章参照：http://www.cnblogs.com/2050/p/3392803.html

css居中技巧的更多相关文章

  1. css水平居中，竖直居中技巧（二）

    css水平居中,竖直居中技巧(二)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  2. css水平居中，竖直居中技巧（一）

    css水平居中,竖直居中技巧(一)===### 1.效果 ### 2.代码#### 2.1.index.html <!DOCTYPE html> <html lang="z ...

  3. CSS 居中大全【转】

    我看最近微博流行 CSS 居中技术,老外码农争相写相关的文章,一篇赛一篇的长啊,我把几篇归纳总结了一下,算是笔记. 孔乙己曾说:“茴香豆的回字有四种写法”,万一哪天有个面试官问你:“居中一共有几种写法 ...

  4. 各种div+css居中方式调整（转载）

    盘点8种CSS实现垂直居中水平居中的绝对定位居中技术 分类: 前端开发2013-09-11 21:06 24959人阅读 评论(3) 收藏 举报 绝对居中垂直居中水平居中CSS居中代码   目录(?) ...

  5. css兼容技巧

    CSS兼容常用技巧 请尽量用xhtml格式写代码,而且DOCTYPE影响 CSS 处理,作为W3C标准,一定要加DOCTYPE声明. 1.div的垂直居中问题 vertical-align:middl ...

  6. CSS 居中大全（转）

    引用:http://jinlong.github.io/blog/2013/08/13/centering-all-the-directions/ CSS 居中大全 AUG 13TH, 2013 |  ...

  7. IE和Firefox浏览器CSS兼容性技巧整理

    转自:http://homepage.yesky.com/185/11484185all.shtml#p11484185 CSS兼容常用技巧(1) 更多精彩相关文章推荐: 各大浏览器 CSS3 和 H ...

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

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

  9. css 实战技巧

    css 看起来比较简单,但是要想做的好也不是那么容易,我们在平时开发中,主要用css 来美化我们的html结构,所有我觉得css 还是挺重要的,这里记录整理一些关于css 的技巧以及容易忘记的知识点. ...

随机推荐

  1. spoj 2319 BIGSEQ - Sequence

    You are given the sequence of all K-digit binary numbers: 0, 1,..., 2K-1. You need to fully partitio ...

  2. 关于Verilog 中的for语句的探讨

    在C语言中,经常用到for循环语句,但在硬件描述语言中for语句的使用较C语言等软件描述语言有较大的区别. 在Verilog中除了在Testbench(仿真测试激励)中使用for循环语句外,在Test ...

  3. Eclipse 代码自动补全

    使用Eclipse开发Android时,发现代码补全功能太差,完全不像VS似的,输入一个字母就出现代码提示. 下面是在Eclipse中实现类似VS代码补全的方法: ①打开Eclipse->Win ...

  4. C语言位运算

    C语言位运算详解    位运算是指按二进制进行的运算.在系统软件中,常常需要处理二进制位的问题.C语言提供了6个位操作运算符.这些运算符只能用于整型操作数,即只能用于带符号或无符号的char,shor ...

  5. 【转】JQUERY相关的几个网站

    作者:Terry li - GBin1.com 1. John Resig - http://ejohn.org 毫无疑问,jQuery 的缔造者的博客是你首先必须关注的. 2. Filmament ...

  6. DELL 720XD和R820玩赏

  7. Protues中有源蜂鸣器BUZZER不响的解决办法（有图）

    这个是BUZZER有源蜂鸣器的protues连线图(FM是我自己的电压探针,可以删除的) 下面是我个人设置的蜂鸣器的参数(为什么很多人的这个蜂鸣器不响,是参数没有设置正确) 蜂鸣器不响的原因是 Ope ...

  8. JFS 文件系统概述及布局分析

    JFS 文件系统概述及布局分析 日志文件系统如何缩短系统重启时间 如果发生系统崩溃,JFS 提供了快速文件系统重启.通过使用数据库日志技术,JFS 能在几秒或几分钟之内把文件系统恢复到一致状态,而非日 ...

  9. Snowflake Snow Snowflakes（哈希，大素数取模）

    Time Limit: 4000MS   Memory Limit: 65536K Total Submissions: 27277   Accepted: 7197 Description You ...

  10. 解决 SQL Server 耗尽内存的情况

       如果您碰到SQL Server服务造成内存不断扩展最终系统死机等情况,请按照以下方法解决. 原理:SQL Server 2000引入的动态内存分配机制,一般不能很好的回收内存,如果计算机一直不关 ...