水平居中css
若是被设置元素为文本、图片等行内元素时，水平居中是经过给父元素设置 text-align:center来实现的。以下代码：
html代码：html
<body> <div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div> </body>
css代码：chrome
<style> div.txtCenter{ text-align:center; } </style>
水平居中设置-块状元素
当被设置元素为块状元素时用text-align：center就不起做用了，这时也分两种状况：定宽块状元素和不定宽块状元素。浏览器
知足定宽和块状两个条件的元素是能够经过设置“左右
margin”值为“auto”来实现居中的。设置div这个块状元素水平居中：spa
html代码：firefox
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：code
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:500px;/*定宽*/ margin:20px auto;/* margin-left 与 margin-right 设置为 auto */ } </style>
也能够写成：htm
margin-left:auto; margin-right:auto;
在实际工做中咱们会遇到须要为“不定宽度的块状元素”设置居中，好比网页上的分页导航，由于分页的数量是不肯定的，因此咱们不能经过设置宽度来限制它的弹性。图片
不定宽度的块状元素有三种方法居中（这三种方法目前使用的都比多）：it
table 标签 ( 包括 <tbody>、<tr>、<td> )。table设置“左右margin居中”（这个和定宽块状元素的方法同样）。举例以下：
html代码：
<div> <table> <tbody> <tr><td> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </td></tr> </tbody> </table> </div>
css代码：
<style> table{ margin:0 auto; } ul{list-style:none;margin:0;padding:0;} li{float:left;display:inline;margin-right:8px;} </style>
display:inline 方法改变块级元素的
display为inline类型，而后使用text-align:center来实现居中效果。以下例子：
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; } .container ul{ list-style:none; margin:0; padding:0; display:inline; } .container li{ margin-right:8px; display:inline; } </style>
注意
这种方法相比第一种方法的优点是不用增长无语义标签，简化了标签的嵌套深度，但也存在着一些问题：它将块状元素的 display类型改成 inline，变成了行内元素，因此少了一些功能，好比设定长度值。
position:relative和 left:50%;经过给父元素设置 float，而后给父元素设置position:relative和 left:50%，子元素设置position:relative和left:-50%来实现水平居中。
代码以下：
<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{ float:left; position:relative; left:50% } .container ul{ list-style:none; margin:0; padding:0; position:relative; left:-50%; } .container li{float:left;display:inline;margin-right:8px;} </style>
这种方法能够保留块状元素仍以display:block的形式显示，优势不添加无语议表标签，不增长嵌套深度，但它的缺点是设置了position:relative，带来了必定的反作用。
垂直居中这三种方法使用得都很是普遍，各有优缺点，具体选用哪一种方法，能够视具体状况而定。
父元素高度肯定的单行文本的竖直居中的方法是经过设置父元素的
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，但这个样式只有在父元素为 td或 th 时，才会生效。因此又要插入 table 标签了。下面看一下例子：<body> <table><tbody><tr><td class="wrap"> <div> <p>看我是否能够居中。</p> <p>看我是否能够居中。</p> <p>看我是否能够居中。</p> <p>看我是否能够居中。</p> <p>看我是否能够居中。</p> </div> </td></tr></tbody></table> </body> css代码：
table td{height:500px;background:#ccc} 由于 td 标签默认状况下就默认设置了vertical-align为middle，因此咱们不须要显式地设置了。
chrome、firefox及IE8以上的浏览器下能够设置块级元素的 display 为table-cell，激活vertical-align 属性，但注意 IE六、7 并不支持这个样式。html代码：
<div class="container"> <div> <p>看我是否能够居中。</p> <p>看我是否能够居中。</p> <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类型这种方法的好处是不用添加多余的无心义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE六、7。
有一个有趣的现象就是当为元素（不论以前是什么类型元素，
display:none除外）设置如下 2 个句之一：position : absolute float : left 或 float:right元素会自动变为以
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>