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

第五种方法：

首先设置一个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中无效

posted on 2016-05-16 10:33  莫尤公子  阅读(181)  评论(0)  编辑  收藏  举报

导航