tianzyc 2016-04-30
一、水平居中:
1.text-align:center;
2.margin:0 auto;或margin:auto;(要设置宽度,否则没有效果。)
3.position:absolute;left:50%;(绝对定位,一般不使用)
4.position:relative;left:50%;(相对定位)
二、竖直居中
1.{
line-height:500px;(所需页面总高度)
vertical:middle;
}
2.单行内容居中:
{
height: 500px;
line-height: 500px;
overflow: hidden;
}
3.多行内容居中:{
padding-top: 200px;
padding-bottom: 200px;(与上下边界的距离相等)
}
4.{
display: table-cell;(把元素当作表格单元来显示)
height: 300px;
vertical-align: middle;
}
5.{
position:fixed;(IE不支持)
width:180px;
height:180px;
top:50%;
left:50%;
margin-top:-90px;
margin-left:-90px;
}
6.{
position:absolute;
width:140px;
height:140px;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
background:black;
}