【前端攻城狮之路】各种居中

CSS居中总结（只列出关键代码）

一、设置text-align:center;

p{ text-align: center; } /*水平居中，适用于文本(

、

..)或图片()*/

二、设置vertical-align:middle

th,td{ vertical-align: middle;} /*垂直居中，适用于表格内容*/

二、设置line-height值等于父容器高度

line-height: height_father;  /*容器内文本垂直居中*/

三、利用margin的auto

     margin-left:auto;

     margin-right:auto;

或

     margin:0 auto;

注：设置的是水平居中，且position:fixed状态下这两种方式无效。

在兼容性方面，除非已经声明了 !DOCTYPE，否则使用 margin:auto 在 IE8 以及更早的版本中无效。

四、利用先50%后-50%居中

父容器：

width: xx px;

height: yy px; 

position: relative;

子元素：

position: absolute;

left: 50%; 

top: 50%; 

margin-left: -xx/2 px; 

margin-top: -yy/2 px;

或

父容器：

width:xx px;

height:yy px; 

position:relative;

子元素：

position:absolute;

left:50%;  /*使子元素左上角移到父元素中心*/

top:50%;  /*使子元素左上角移到父元素中心*/

transform:translate(-%50,-%50);  /*回退自身大小的50%距离，使子元素中心与父元素中心对齐*/

注：translate(-50%,-50%)比较奇特，其百分比计算是以自己为基准而不是父元素，也适用于没固定大小的内容。

补充：

 在position:relative情况下设置left、top…会改变offsetLeft、offsetTop…的值

 通过translate(200px,100px)位移不会改变offsetLeft、offsetTop…的值

五、利用绝对定位居中

父容器：

width: xx px;

height: yy px;

position: relative;

子元素：

position: absolute;

margin: auto;

top: 0; right: 0; bottom: 0; left: 0;

overflow: auto;  /*防止内容溢出*/

六、相对于视口居中

父容器：

width: xx px;

height: yy px;

position: relative;

子元素：

position: fixed;

margin:auto;

top: 0; right: 0; bottom: 0; left: 0;

z-index: 999;

overflow: auto;

七、模块响应式居中

代码示例：

#div1{

width: 60%;

height: 60%;

max-width: 1000px;

min-width: 40px;

margin: auto;

top: 0; right: 0; bottom: 0; left: 0;

overflow: auto;

}

参考资料：http://www.5icool.org/a/201309/a2516.html

参考资料： http://www.5icool.org/a/201309/a2516.html