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. 老oj3444 && Pku3241 Object Clustering

    Description We have N (N ≤ 10000) objects, and wish to classify them into several groups by judgemen ...

  2. Egret 纹理、计时器

    1. 九宫切 典型例子就是圆角矩形的拉伸问题. 先去P一张绿色的圆角矩形. private createGameScene():void { var box:egret.Bitmap = new eg ...

  3. gridview checkbox从服务器端和客户端两个方面实现全选和反选

    GridView中的checkbox的全选和反选在很多的地方都是要求实现的,所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下,希望本文对你有所帮助 GridVi ...

  4. [bug]Syntax error, unrecognized expression: input#ctl00$ContentPlaceHolder1$Pager_input

    1.在ie10上浏览页面的时候,突然发现在使用Aspnetpager的页面会有一个bug. 2. 3.查了很多解决方案,最后将vs2013中, 将该勾取消,再次浏览,你会发现就正常了,虽然该功能很强大 ...

  5. 1、MyBatisNet的安装使用

    用到的几个DLL按理说应该到官网下载,但这个官网是谷大哥的,不知道是不是被屏蔽,总打不开,幸好从别人的程序里拷过来一份,直接放在自己的程序里就行! 程序结构如下: Providers.config,S ...

  6. BZOJ 1037 生日聚会

    Description 今天是hidadz小朋友的生日,她邀请了许多朋友来参加她的生日party. hidadz带着朋友们来到花园中,打算坐成一排玩游戏.为了游戏不至于无聊,就座的方案应满足如下条件: ...

  7. Spring的OpenEntityManagerInViewFilter

    在Java Web项目中使用Hibernate经常会遇到LazyInitializationException .这是因为controller和model层(java代码)将通过JPA的一些启用了延迟 ...

  8. WordPress BuddyPress Extended Friendship Request插件跨站脚本漏洞

    漏洞名称: WordPress BuddyPress Extended Friendship Request插件跨站脚本漏洞 CNNVD编号: CNNVD-201307-609 发布时间: 2013- ...

  9. SQL约束和字段约束的创建和删除

    1)禁止所有表约束的SQLselect 'alter table '+name+' nocheck constraint all' from sysobjects where type='U' 2)删 ...

  10. Swap Nodes in Pairs——LeetCode

    Given a linked list, swap every two adjacent nodes and return its head. For example,Given 1->2-&g ...