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. 黑马程序员——利用swap函数研究C的指针

    ------Java培训.Android培训.iOS培训..Net培训.期待与您交流! ------- 设计3个函数,分别实现已下功能: 交换两个整数 交换两个整形指针 交换任意两个同类型的变量 #i ...

  2. 不定参数函数原理以及实现一个属于自己的printf函数

    一.不定参数函数原理 二.实现一个属于自己的printf函数 参考博文:王爽汇编语言综合研究-函数如何接收不定数量的参数

  3. Redux1

    Redux 写在前面 写React也有段时间了,一直也是用Redux管理数据流,最近正好有时间分析下源码,一方面希望对Redux有一些理论上的认识:另一方面也学习下框架编程的思维方式. Redux如何 ...

  4. Java库使用----xstream1.3.1

    package com.xstream; import java.util.Map; /** * XStream可以自动生成相关的xml配置 */ public class XstreamTest { ...

  5. Prime Path

    poj3126:http://poj.org/problem?id=3126 题意:给你两个数n,k,两个数都是四位数的素数.现在让你改变n的一位数,让n变成另外一个素数.然后把这个素数在改变其中的以 ...

  6. H3C S5000和H3C S5500,俺来罗

    S5开头,后面第二位数0-4搂二层交换机.5-9的为三层交换机. 小常识.

  7. Linux Kernel 'dispatch_discard_io()'安全绕过漏洞

    漏洞版本: Linux Kernel 漏洞描述: Bugtraq ID:60414 CVE ID:CVE-2013-2140 Linux是一款开源的操作系统. 由于不充分的检查BLKIF_OP_DIS ...

  8. (转载)MySQL 统计数据行数 Select Count

    (转载)http://www.5idev.com/p-php_mysql_select_count.shtml 统计数据行数 SELECT COUNT() FROM 语法用于从数据表中统计数据行数. ...

  9. linux下挂载另一系统硬盘。

    问题描述: Error mounting /dev/sda5 at /media/wangzheng/办公: Command-line `mount -t "ntfs" -o &q ...

  10. Java---网络编程(1)

    网络编程 相关基础概念 1.计算机网络与Internet 2.TCP/IP协议 3.Internet地址 - - -IP地址,形如xxx.xxx.xxx.xxx - - -域名系统.例如www.edu ...