CSS是前端开发者必学的一门知识,如果按W3C,其实很简单,但由于浏览器版本不同,各类浏览器有所不同,所以都前端开发者来讲,是一个挑战。有很多开发者,喜欢用hack来处理这类问题,本人不建议使用hack处理,只要大家写的CSS是完全符合W3C标准,且是各浏览器都识别的标签,基本上是不存在兼容性问题。今天为大家介绍CSS居中问题的处理:
1、层水平居中、层垂直居中
2、文字水平居中、文字垂直居中
3、图片水平居中、图片垂直居中
一、层水平居中、层垂直居中
水平居中,有两种方法(垂直居中的原理也一样):
法一:margin:0 auto;这种方法与float:left;冲突,有时候会出现一些不太好处理的问题。尤其在您想用body{margin:0 auto;}的时候,我建议您使用法二。测试代码如下:
<html>
<head>
<style>
div{width:1004px;border:1px solid red;height:500px;margin:0 auto;}
</style>
</head>
<body>
<div></div>
</body>
</html>
法二:使用绝对定位,巧用左移动:float:left;position:absolute;left:-this.width/2;left:50%;测试代码如下:
<html>
<head>
<style>
*{margin:0;padding:0;}
html{width:100%;height:100%;background:#666666;float:left;position:relative;}
body{width:1004px;background:#FFF;border:1px solid #cccccc;position:absolute;float:left;left:50%;margin-left:-502px;}
div{height:800px;}
</style>
</head>
<body>
<div></div>
</body>
</html>
二、文字水平居中、文字垂直居中
文字水平居中:text-align:center;
文字垂居中中:height:24px;line-height:24px;
三、图片水平居中、图片垂直居中
图片水平居中:
<center>
<img src='' />
</center>
图片垂直居中:
<div style="height:50px;position:relative;border:1px solid red;width:100px;">
<img src="http://www.baidu.com/img/shouye_b5486898c692066bd2cbaeda86d74448.gif" style="border:1px solid red;height:30px;width:60px;top:50%;position:absolute;left:50%;float:left;margin-left:-30px;margin-top:-15px;">
</div>