一.行内元素

1、水平居中

 1）text-align:center;

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

2）width:fit-content;

<div class="box">
    <span class="child">content</span>
</div>
<style>
    .box{
        background-color:red;
        width:fit-content;
    }
</style>

2、垂直居中

line-height(单行文本）

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

二.块级元素

1、水平居中

margin:0 auto;

<div class="box">
    <div class="child"></div>
</div>
<style>
    .box{
        background-color:red;
    }
    .child{
        width:100px;
        margin:0 auto;
        background-color:blue;
    }
</style>

2、水平垂直居中

1）定位

<style>
    .box{
        position:relative;
        height:200px;
        background-color:red;
    }
    .child{
        weight:100px;
        height:100px;
        position:absolute;
        background:blue;
        left:calc(50%-50px);
        top:calc(50%-50px);    
    }
    .box{
        position:relative;
        height:200px;
        background-color:red;
    }
    .child{
        weight:100px;
        height:100px;
        position:absolute;
        background:blue;
        left:50%;
        top:50%;
        margin-top:-50px;
        margin-left:-50px;
    }
</style>

2）定位+transform

<style>
    .box{
        position:relative;
        height:200px;
        background-color:red;
    }
    .child{
        position:absolute;
        background:blue;
        left:50%;
        top:50%;
        transform:translate(-50%,-50%);
    }
</style>

3）定位+margin

<style>
    .box{
        position:relative;
        height:200px;
        background-color:red;
    }
    .child{
        width:100px;
        height:100px;
        position:absolute;
        left:0;
        right:0;
        top:0;
        botttom:0;
        margin:auto;
        background:blue;
    }
</style>

4）padding

<style>
    .box{
        padding:20px;
        background-color:red;
    }
    .child{
        height:200px;
        background:blue;
    }
</style>

5）flex

<style>
    .box{
        height:200px;
        display:flex;
        align-items:center; 
        justify-content:center; 
        background-color:red;
    }
    .child{
        width:100px;
        height:100px;
        background-color:blue;
    }
</style>

6）伪元素

<style>
    .box{
        height:200px;
        text-align:center;
        background-color:red;
    }
    .child{
        width:100px;
        height:100px;
        display:inline-block;
        vertical-align:middle;
        background-color:blue;
    }
    .box::before{
        content:"";
        width:20px;
        height:200px;
        display:inline-block;
        vertical-align:middle;
        background-color:yellow;
    }
</style>

7）calc（宽高相等）

<style>
    .box{
        width:600px;
        height:600px;
        background-color:red;
    }
    .child{
        width:100px;
        height:100px;
        padding:calc((100%-100px)/2);
        background-clip:content-box;
        background-color:blue;
    }
</style>

常见面试题：

 1）行内元素实现水平垂直居中：

        text-align: center;（text-align: center只能实现文本的垂直居中）

        line-height: 50px;（line-height不能实现多行文本的垂直居中）

        padding:50px;（不固定高度的垂直居中 通过设置padding实现）

        使用display设置为table，配合样式vertical-align设置为middle来实现，如下：        

                    父元素{
                        display：table；
                    }
 
                    子元素{
                        display：table-cell；
                        vertical-align：middle；
                    }
        2）块级元素实现水平垂直居中：

        第一种方式：使用弹性盒模型实现水平垂直居中

                display: flex;
                justify-content: center;
                align-items: center;
        第二种方式：采取绝对定位配合margin的方式实现（这种方式有缺陷 需要知道固定的宽度和高度才行）

                position: absolute;
                left:50%;
                top:50%;
                margin-left: -50px;（高度设置了100px，margin-left就是宽度的一半）
                margin-top: -50px;（宽度也设置了100px，margin-top就是高度的一半）
        第三种方式：可以采取借助css3的变形属性transform来实现的方式实现

                position: absolute;
                left:50%;
                top:50%;
                transform: translate(-50%,-50%);（在当前位置偏移自身宽高的一半）
        第四种方式：需要盒子有宽高，但是不需要去计算偏移盒子的宽高

                position: absolute;
                left:0;
                top:0;
                right:0;
                bottom:0;
 
                margin:auto;
                height:100px;
                width:100px;

文章推荐：

        1.css中background属性引入图片url()中地址

        2.CSS：弹性盒子布局 display: flex ； 

        3. CSS单行/多行文本溢出显示省略号(...)