前端三部曲之Css-- 1（常见的居中方式）

下面来介绍一下web端页面最常见的居中方式

页面的基本结构：一个简单的div

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    :root , html{
        height: 100%;
        width: 100%;
    }
    div{
        width: 100px;
        height: 100px;
        background: red;
    }
    </style>
</head>
<body>
    <div class="mid"></div>
</body>
</html>
</html>

1.利用position

    :root , html{
        height: 100%;
        width: 100%;
    }
    div{
        width: 100px;
        height: 100px;
        background: red;
    }
    .mid{
        position: absolute;
        top: 50%;
        left: 50%;
        /* 通过top 50% 和 left 50% 让div的左顶点居中 */
    }

　　几种让div自身平移一半的方法

　　　　1.对于已知宽高

　　　　通过margin平移自身大小的一半　

.mid{
        position: absolute;
        top: 50%;
        left: 50%;        
        margin-left: -50px;
        margin-top:-50px;  
    }

　　　　通过calc函数进行计算

.mid{
        position: absolute;   
        top:calc(50% - 50px);
        left:calc(50% - 50px);
    }

　　　　通过transform中的translate

.mid{
        position: absolute;   
        top:50%;
        left:50%;
        transform: translate(-50%,-50%); 
    }

2.利用flex弹性盒模型

body{
        width: 100%;
        height:100%;
        display: flex;
        align-items:center;
        justify-content: center;
    }

3.利用margin:auto 加position 四个方向为0

四个方向设置为0，用

.mid{
        position: absolute;   
        margin:auto;
        left: 0;
        top: 0;
        bottom:0;
        right: 0;
    }

4.利用table table-cell

利用table-cell可以使用vertical-align: middle实现垂直居中

再在其子元素里用margin实现垂直居中即可

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        :root,
        html {
            height: 100%;
            width: 100%;
        }
        body {
            width: 100%;
            height: 100%;
            display: table;
        }
        .wrapper {
            width: 100%;
            height: 100%;
            display: table-cell;
            vertical-align: middle;
        }
        .mid {
            margin:0 auto;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="wrapper">
        <div class="mid">
        </div>
    </div>
</body>
</html>

让文字在块级元素内水平垂直居中

<div class="mid">123</div>

.mid{
        width: 100px;
        height: 100px;
        text-align: center;
        line-height: 100px;
        background: red;
        }

垂直水平居中的方式就分享到这里。单独的垂直或者水平居中原理相同只要分开了用即可

以上就是常用的居中方式，最经常使用到的就是用盒模型的margin和flex弹性盒子来进行居中

也推荐使用这两种方式。

如果有任何的疑问欢迎一起交流讨论，后续如果还有什么其他的居中方式也会及时补充。

 
  .mid{ 
 
  position: 
  absolute; 
 
  margin: 
  auto; 
 
  left: 
  0; 
 
  top: 
  0; 
 
  bottom: 
  0; 
 
  right: 
  0; 
 
   }

前端三部曲之Css-- 1（常见的居中方式）

猜你喜欢