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. vim操作命令-笔记

    显示行号:在vim命令行模式下输入 :set nu 或 :set number 取消显示行号:在vim命令行模式下输入 :set nonu 或 :set nonumber 查看文件编码格式: :set ...

  2. __attribute__ ((section(".text")))的测试

    一.测试原因 在学习u-boot的环境变量过程中,看到有如此的代码,现对涉及到的内容进行实验测试. 二.测试目的 1.了解gcc允许对段的属性进行更改的方法. 2.解决”ENV_IS_EMBEDDED ...

  3. SQL语句の集锦

    6.删除数据后根据主键从备份表中恢复 insert  sameTable_1 (name,dz) select name,dz from sameTable_1_bak where not exist ...

  4. RunLoop-b

    RunLoop 是 iOS 和 OSX 开发中非常基础的一个概念,这篇文章将从 CFRunLoop 的源码入手,介绍 RunLoop 的概念以及底层实现原理.之后会介绍一下在 iOS 中,苹果是如何利 ...

  5. 转：aptitude 命令详解

    原文:http://www.isspy.com/aptitude-%E5%91%BD%E4%BB%A4%E8%AF%A6%E8%A7%A3/ aptitude aptitude 是 Debian GN ...

  6. Mysql 授权访问

    ' WITH GRANT OPTION; FLUSH PRIVILEGES; 这就是设置一个 urser:root pwd: 账号,该账号可以在任何机器,同时访问服务器

  7. BZOJ 1052 覆盖问题

    Description 某人在山上种了N棵小树苗.冬天来了,温度急速下降,小树苗脆弱得不堪一击,于是树主人想用一些塑料薄膜把这些小树遮盖起来,经过一番长久的思考,他决定用3个L*L的正方形塑料薄膜将小 ...

  8. SharePoint ListTemplateType enumeration

    from microsoft http://msdn.microsoft.com/en-us/library/office/microsoft.sharepoint.client.listtempla ...

  9. db2数据库中查找数据库表

    模糊查找db2数据库中的数据库表: select tabname,remarks from syscat.tables where TABNAME like  'DM%' select 'DROP T ...

  10. 协程coroutine

    协程(coroutine)顾名思义就是“协作的例程”(co-operative routines).跟具有操作系统概念的线程不一样,协程是在用户空间利用程序语言的语法语义就能实现逻辑上类似多任务的编程 ...