一.行内元素

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单行/多行文本溢出显示省略号(...)