css水平垂直居中对齐方法汇总(实测有用)

 分类:div+css教程时间:2021-03-18点击:

   我们在前端页面布局工作中,经常会用到css水平居中和css垂直居中对齐,关于css水平居中的方法,可以看下已往文章常见css布局水平居中的6种方法,今天这篇文章是css水平垂直居中对齐方法汇总整理。

0.效果演示(垂直居中对齐,同时也水平居中对齐)

css水平垂直居中对齐方法

1.方法:css3弹性布局flex,使用率极高

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3弹性布局flex水平垂直居中</title>
    <style type="text/css">
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          display: flex;
          align-items: center;
          justify-content: center;
      }
       .box .son{
          width:100px;
          height:100px;
          line-height: 100px;
          background-color: red;
      }
    </style>
</head>
<body>
    <div class="box">
      <div class="son">我是儿子盒子</div>
    </div>
</body>
</html>


2.方法:绝对定位+transform

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位+transform水平垂直居中</title>
    <style type="text/css">
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          position: relative;
      }
       .box .son{
          width:100px;
          height:100px;
          margin: 0 auto;
          line-height: 100px;
          background-color: red;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%,-50%);
      }
    </style>
</head>
<body>
    <div class="box">
      <div class="son">我是儿子盒子</div>
    </div>
</body>
</html>

3.方法:绝对定位+margin:auto

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位+margin水平垂直居中</title>
    <style type="text/css">
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          position: relative;
      }
       .box .son{
          width:100px;
          height:100px;
          margin: auto;
          line-height: 100px;
          background-color: red;
          position: absolute;
          top: 0;
          bottom: 0;
          right: 0;
          left: 0;
      }
    </style>
</head>
<body>
    <div class="box">
      <div class="son">我是儿子盒子</div>
    </div>
</body>
</html>

4.方法:box-alignand+box-pack(IE就飘过)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>box-align+box-pack水平垂直居中</title>
    <style type="text/css">
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          position: relative;
          top: 0; left: 0; right: 0; bottom: 0;
          display: -webkit-box;
          -webkit-box-align: center;
          -webkit-box-pack: center;
      }
       .box .son{
          width:100px;
          height:100px;
          line-height: 100px;
          background-color: red;
          -webkit-box-flex: 0;
      }
    </style>
</head>
<body>
    <div class="box">
      <div class="son">我是儿子盒子</div>
    </div>
</body>
</html>

5.方法:绝对定位+maring偏移

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位+maring偏移水平垂直居中</title>
    <style type="text/css">
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          position: relative;
      }
       .box .son{
          width:100px;
          height:100px;
          line-height: 100px;
          background-color: red;
          margin:auto;
          position:absolute;
          left:50%;
          top:50%;
          margin-left: -50px;
          margin-top:-50px;
      }
    </style>
</head>
<body>
    <div class="box">
      <div class="son">我是儿子盒子</div>
    </div>
</body>
</html>

6.方法:table-cell+vertical-align

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>绝对定位+maring偏移水平垂直居中</title>
    <style type="text/css">
      .box{
          width:300px;
          height:300px;
          background: #0000EE;
          display:table-cell;
          vertical-align:middle;
          text-align: center;
      }
       .box .son{
          width:100px;
          height:100px;
          line-height: 100px;
          background-color: red;
          display:inline-block;
      }
    </style>
</head>
<body>
    <div class="box">
      <div class="son">我是儿子盒子</div>
    </div>
</body>
</html>


除注明外的文章,均为来源:老汤博客,转载请保留本文地址!
原文地址: