前端三部曲之Css-- 1（常见的居中方式）-优快云博客

本文详细介绍了网页设计中常见的居中布局方法，包括利用position、flex弹性盒模型、margin:auto结合position、table-cell以及文本块级元素内的水平垂直居中等五种方式，适合初学者及有经验的前端开发者参考。

下面来介绍一下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;
}

转载于:https://www.cnblogs.com/yongG/p/11003038.html