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. Expert Shell Scripting

    Expert Shell Scripting 好好学习这本书

  2. 定义任务打印gradle下载的jar包位置

    //定义任务打印gradle下载的jar包位置task showMyCache { configurations.compile.each { println it }}

  3. cf B Very Beautiful Number

    题意:给你两个数p和x,然后让你找出一个长度为p的数,把它的最后移到最前面之后得到的数是原来数字的x倍,有很多这样的数取最小. 思路:枚举最后一位,然后就可以推出整个的一个数,然后比较得到的数的第一个 ...

  4. linux下so动态库一些不为人知的秘密(转)

    linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识.基本上每一个linux 程序都至少会有一个动态库,查看某个程序使用了那些动态库, ...

  5. 对依赖倒置原则(DIP)及Ioc、DI、Ioc容器的一些理解（转）

    所谓依赖倒置原则(Dependence Inversion Principle)就是要依赖于抽象,不要依赖于具体.简单的说就是要求对抽象进行编程,不要对实现进行编程,这样就降低了客户与实现模块间的耦合 ...

  6. 怒刷BZOJ记录（一）1001~1037

    我实在是太弱了...不滚粗只能刷BZOJ了...这里来记录每天刷了什么题吧. 2015-7-9 : 1001[BeiJing2006]狼抓兔子                 | 最大流练习(呃..其 ...

  7. Linux下如何查看高CPU占用率线程 LINUX CPU利用率计算

    目录(?)[-] proc文件系统 proccpuinfo文件 procstat文件 procpidstat文件 procpidtasktidstat文件 系统中有关进程cpu使用率的常用命令 ps ...

  8. 【动态规划】Vijos P1313 金明的预算方案（NOIP2006提高组第二题）

    题目链接: https://vijos.org/p/1313 题目大意: m(m<=32000)金钱,n(n<=60)个物品,花费vi,价值vi*ci,每个物品可能有不超过2个附件,附件没 ...

  9. USACO月赛数据

    终于找到了usaco月赛的数据…… 根据月赛的名称,我们可以写出数据地址.比如08年一月的月赛即是:http://contest.usaco.org/JAN08  这里要注意区分大小写.

  10. UVALive4513 Stammering Aliens（哈希法，后缀数组）

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=12580 [思路] 求出现次数不小于k次的最长可重叠子串和最后的出现 ...