关闭

css 水平居中 垂直居中方法

275人阅读 评论(1) 收藏 举报
分类:
div 水平居中的方法:
1) width + auto; 

   div{width:200px;margin: 0 auto;} 宽度和auto必须同时存在。
2) 借助table; 
html: <table><tr><td><ul><li>1</li><li>2</li></ul></td></tr></table>  
css: table{margin:0 auto;}   
3) inline + text-algin:center;
html:<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
css: .container{text-algin:center;} 
    .container ul{display:inline;}
.container li{display:inline;}
4)  float+postion+left;
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: .container{
float:left;
position:relative;
left:50%
}
.container ul{
position:relative;
left:-50%;
}


div 高度居中:
1)借助table;
    html:
<body>
<table><tbody><tr><td class="wrap">
<div>
<p>看我是否可以居中。</p>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>   
    css:table td{height:500px;background:#ccc;vertical-align:middle;}

2)table-cell; 
   css:
{display:table-cell;vertical-align:middle;}不兼容ie6  ie7
   
   
   
 
0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:158392次
    • 积分:2661
    • 等级:
    • 排名:第13639名
    • 原创:116篇
    • 转载:23篇
    • 译文:0篇
    • 评论:12条
    文章分类
    最新评论