水平居中、垂直居中-CFANZ编程社区

水平居中、垂直居中

代码如下：就是div的大小必须写死

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
            .centerH{position: absolute;left:0;right:0;margin:auto;}                
            .centerV{position: absolute;top:0;bottom:0;margin:auto;}                  
            .centerHV{position: absolute;top:0;bottom:0;left:0;right:0;margin:auto;}  
    </style>
  </head>
  <body>
    <div class="centerHV" style="width: 100px; height: 100px; background-color: red;">水平垂直居中</div>
    <div class="centerH" style="width: 100px; height: 100px; background-color: red;">水平居中</div>
    <div class="centerV" style="width: 100px; height: 100px; background-color: red;">垂直居中</div>
  </body>
</html>

效果如图，是响应式的：

水平居中、垂直居中_垂直居中

居中对齐的另一种方式：

float: none;
display: block;
margin-left: auto;
margin-right: auto;

0 条评论