您的位置：首页 > Web前端 > CSS

css水平垂直居中方法（一）

2016-05-16 10:33 585 查看

第五种方法：

首先设置一个div，设置其的width与height，为了方便观察，我定义了div的背景色为red，代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content {

height: 240px;
width: 300px;
background-color: red;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>

效果如下图显示：

现在图片并没有什么居中的显示，接下来要描述的居中方法主要借助position方法，将div的position方式设置为absolute，然后可以设置其left=0，right=0，由于其有宽度，所以接下来设置margin:auto，就可以实现div的水平居中，代码如下：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content {

height: 240px;
width: 300px;
position: absolute;
left: 0;
right: 0;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>

效果如下图所示：

同理，由于div有高度，只要设置top=0，buttom=0，在margin为auto的作用下，可以实现其垂直居中，代码如下所示：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#content {

height: 240px;
width: 300px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: red;
}
</style>
</head>
<body>
<div id="content"> Content here</div>
</body>
</html>

效果如下所示：

这种方法思路可以单独设置元素的水平居中与垂直居中，且思路简单，但是在IE8 beta中无效

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航