css水平垂直居中方法(一)

时间:2022-03-03 19:33:36

第五种方法:

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

效果如下图显示:

css水平垂直居中方法(一)

 

现在图片并没有什么居中的显示,接下来要描述的居中方法主要借助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>

效果如下图所示:

css水平垂直居中方法(一)

 

同理,由于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>

效果如下所示:

css水平垂直居中方法(一)

 

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