注册

DIV+CSS设置水平垂直居中效果

嗨豆壳技术文章 时间:2015-05-05 15:02:36 [ray]

利用 CSS 来实现对象的水平垂直居中有许多不同的方法,本文不一一介绍。这里仅介绍两种实用的方法实现DIV+CSS设置水平垂直居中。

有些方法在一些浏览器中无效(通常是低版本的IE,你懂的)。下面我们看一下2种使对象垂直居中的方法。

CSS设置水平垂直居中效果方法一
<html>
<head>
<style type="text/css">
.demo{
background: green;
width: 200px;
height: 150px;
margin: auto;
position:absolute;
left:0;
right:0;
bottom:0;
top:0;}
</style>
</head>
<body>
<div class="demo">纯CSS水平垂直居中效果</div>
</body>
</html>
CSS设置水平垂直居中效果方法二
<html>
<head>
<style type="text/css">
.floater {
    float:left; 
    height:50%;
    margin-bottom:-120px;
}
.content {
	clear:both; 
	height:240px;
	width: 200px;
	background: green;
	margin: 0 auto;
	position:relative;
}
</style>
</head>
<body>
<div class="floater"></div>  
<div class="content"> Content here </div>  
</body>
</html>

实践效果2方法会更好一些,但需要多出一个空元素用于定位,具体看个人喜好选择了!

标签

本文地址:https://www.hi-docs.com/article/138.html

上一篇:JavaScript中仿PHP数组函数in_array()的实现方法

下一篇:linux date命令实现日期时间和Unix时间戳转换