居中

1，水平居中

1-1，行内元素居中

h1 { text-align: center }

运行效果：

可以设置文本，图片等居中排列

1-2，定宽块状元素居中

.div1 {  

  border: 1px solid red;

  width: 200px;

  background-color: #ff0;

  margin: 30px auto

}

运行效果：

设置“margin: 30px auto”来实现块状元素居中，元素必须满足定宽（宽度width是固定值）和块状两个条件

1-3，不定宽块状元素居中

不定宽度的块状元素有三种方法居中：

1）加入table标签

利用table标签的长度自适应性（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法，使其水平居中。

步骤如下：

第一步：为需要居中的元素外面加入一个 table 标签（包括 ，，）

 

   

     

       

     

   

 

不定宽元素一

第二步：为这个 table 设置“左右 margin 居中”（这个和定宽块状元素的方法一样）。

table {

  border: 1px solid red;

  margin: 0 auto

}

div { border: ipx solid red }

运行效果：

2）设置display: inline方法：

改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align: center 来实现居中效果

.div2 { text-align: center }

运行效果：

.div2 ul { display: inline }

运行效果：

.div2 li {

  display: inline;

  border: 1px solid red;

  margin-right: 20px

}

运行效果：

将上面三组css样式组合为一组，

.div2 { text-align: center }

.div2 ul {

  border: 1px solid yellow;

  display: inline

}

.div2 li {

  display: inline;

  border: 1px solid red;

  margin-right: 20px

}

运行效果：

这种相比第一种的优势是不用增加无语义标签，但也存在着一些问题：它将块状元素的 display 类型改为 inline，变成了行内元素，减少了一些功能，比如设定长度值。

3）设置position: relative和 left: 50%：

利用相对定位的方式，将元素向左偏移50%，即达到居中的目的

.div3 {

  position: relative;

  left: 50%

}

运行效果：

2，垂直居中

2-1，父元素高度确定的单行文本

设置父元素的 height 和 line-height 高度一致来实现

.div4 {

  height: 200px;

  line-height: 200px;

  background-color: #0cc

}

运行效果：

注：

这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离块。

2-2，父元素高度确定的多行文本

1)使用插入 table  (包括tbody、tr、td)标签，同时设置 vertical-align: middle。

 

   

     

       

     

   

 

父元素高度           父元素高度           父元素高度           父元素高度           父元素高度

css代码：

.td1 {

  height: 500px;

  background: #cc0

}

运行效果：

td 标签默认情况下就默认设置了 vertical-align 为 middle，因此我们不需要设置

2）设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性

.div5 {

  height: 300px;

  background: #1F0;

  display: table-cell;

  vertical-align: middle

}

运行效果：

chrome、firefox 及 IE8 以上的浏览器下可以设置，IE6、7 并不支持这个样式， 兼容性比较差，只供大家学习参考。

3，隐性改变display类型

有一个有趣的现象就是当为元素（不论之前是什么类型元素，display: none除外）设置以下2个句之一：

1. position:  absolute

2. float: left 或 float: right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以display: inline-block（内联块状元素）的方式显示，当然就可以设置元素的width和height了，且默认宽度不占满父元素。

.div6 {

  width: 300px;

  height: 200px

}

.div6 a {

  float: left; /*或 position: absolute*/

  width: 100px;

  background: #0cc

}

运行效果：