超全面的CSS居中方法总结

行内元素的居中

水平居中

text-align:center;

<body>
    <div class="parent"> 
           <span class="child">content</span>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        text-align: center;
    }
</style>

fit-content;

<body>
    <div class="parent"> 
           <span class="child">content</span>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        width: fit-content;/*父元素适应子元素的宽度*/
        margin: auto;
    }
</style>

垂直居中

line-height;(只针对单行文本)

<body>
    <div class="parent"> 
           <span class="child">content</span>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        height: 200px;
        line-height: 200px;
    }
</style>

块级元素的居中

水平居中

* margin:0 auto;

<body>
    <div class="parent"> 
           <div class="child">content</div>
    </div>
</body>
<style>
    .parent{
        background-color: red;
    }
    .child{
        background-color: blue;
        width: 100px;
        margin: 0 auto;/*左右自适应*/
    }
</style>

水平垂直居中

定位

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        position: relative;
        height: 200px;
    }
    .child{
        background-color: blue;
        width: 100px;
       height: 100px;
       position: absolute;
       left: 50%;
       top: 50%;
       margin-top: -50px;
       margin-left: -50px;
    }
</style>

2.定位+transform

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        position: relative;
        height: 200px;
    }
    .child{
       background-color: blue;
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%,-50%);
       /*子元素大小未知*/
    }
</style>

3.定位+margin

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        background-color: red;
        position: relative;
        height: 200px;
    }
    .child{
        background-color: blue;
        width: 100px;
        height: 100px;
        position: absolute;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
    }
</style>

4.padding

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        padding: 20px;
        background-color: red;
    }
    .child{
        height: 200px;
        background-color: blue;
    }
</style>

5.flex

<body>
    <div class="parent"> 
           <div class="child"></div>
    </div>
</body>
<style>
    .parent{
        display: flex;
        height: 200px;
        align-items: center;
        justify-content: center;
        background-color: red;
    }
    .child{
        height: 100px;
        width: 100px;
        background-color: blue;
    }
</style>

6.伪元素
7.函数calc

超全面的CSS居中方法总结

行内元素的居中

水平居中

垂直居中

块级元素的居中

水平居中

水平垂直居中

中二病の软

引用和评论

DOM

Vue.js-Vue实例

你可能不知道的图片加载相关知识

手写一个动态海洋和天空效果的vue hooks

使用CSS给标题添加书名号并超出省略

Base64编码的“暗坑”：解密失败？可能是这些原因！

Koa+Typescript起手式(空环境) 不用每次玩node都要搭环境了！