huanggr
web前端开发中常用的居中方法
web前端开发中经常会遇到页面元素居中的问题，以后介绍比较零散，今天来详细介绍一下，页面居中主要会用到哪里呢，主要会用到登录框，页面弹框等处，真可谓用途广泛，下面就来给大家介绍介绍在web前端开发中比较常用的几种居中方式
1、行内元素水平居中，可以在父元素中使用text-align:center;垂直居中可以用，line-height:100px;例如：
1 2 3 4 5 6 7 8 9 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> text-align:center;<br /> line-height:100px;<br /> }<br /> </style> <div>文字居中</div> |
2、块级元素水平居中，可以用margin:auto;代码如下：
1 2 3 4 5 6 7 8 9 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> margin:0px auto;//上下边距为0，水平居中<br /> background:#ccc;<br /> }<br /> </style> <div>文字居中</div> |
3、元素绝对居中，利用定位position，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> position:relative;<br /> }<br /> div p{<br /> width:100px;<br /> height:20px;<br /> position:absolute;<br /> margin:auto;<br /> top:0;<br /> bottom:0;<br /> left:0;<br /> right:0;<br /> }<br /> </style> <div> 文字居中 </div> |
4、元素绝对居中的另一种方法，代码如下：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <style type="text/css"> div{<br /> width:300px;<br /> height:100px;<br /> position:relative;<br /> background:#bbb;<br /> }<br /> div p{<br /> width:100px;<br /> height:20px;<br /> position:absolute;<br /> top:50%;<br /> margin-top:-10px;<br /> left:50%;<br /> margin-left:-50px;<br /> }<br /> </style> <div> 文字居中 </div> |
7