水平居中
html代码：
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style>
水平居中定宽块状元素
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/margin:20px auto;/* margin-left 与 margin-right 设置为 auto */} </style>
水平居中总结
不定宽度的块状元素有三种方法居中：
1. 加入table标签
2. 设置display:inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3. 设置position.relative和left:50%；利用相对定位的方式，将元素向左移50%，达到居中的效果。
html代码：
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css代码：
<style>table{ border:1px solid; margin:0 auto; }</style>
第二种：
html代码：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码：
<style> .container{ text-align:center;}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline;}/* margin-right:8px（设置li文本之间的间隔）*/.container li{ margin-right:8px; display:inline; } </style>
垂直居中，保持height和line-height高度一致，height是该元素高度，line-height行间距指在文本中行与行之间的基线间的距离。
如下代码：
<div class="container"> hi,imooc! </div>
css代码：
<style> .container{ height:100px; line-height:100px;background:#999; } </style>
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
（重要方法）方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> </div></td></tr></tbody></table></body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
除了上面讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>
css代码：
<style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a> </div>
css代码
<style> .container a{ position:absolute;width:200px; background:#ccc; } </style>
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
