css居中大总结

一：行内元素

1.水平居中

1）通过给父元素添加 text-align:center

<style>
.parent{
    background-color:blueviolet;
    text-align:center;
}
</style>
<body>
   <div class="parent">
       <span class="child">行内元素水平居中</span>
   </div>
</body>

2) 通过给父元素添加 width：fit-content；然后再添一个：margin：auto；

<style>
.parent{
    background-color:blueviolet;
    width:fit-content;/*父元素的宽度就会适应子元素的宽度*/
        margin:auto;
}
</style>
<body>
   <div class="parent">
       <span class="child">行内元素水平居中</span>
   </div>
</body>

2.垂直居中

1）line-height(只针对与单行文本)

<style>
.parent{
    height:230px;
    line-height:230px;/*数值是和高度一致的*/
    background-color:aquamarine;  
}
</style>
<body>
     <div class="parent">
        <span class="child">行内元素垂直居中</span>
    </div>
</body>

二：块级元素：

1.水平居中

1) 通过给子元素添加 margin：0 auto；

<style>
.parent{
    background-color:brown;
}
.child{
    width:200px;
    margin:0 auto;
    text-align:center;/*让其文字居中*/
    background-color:red;
}
</style>
<body>
   <div class="parent">
      <div class="child">块级元素水平居中</div>
   </div>
</body>

重点：

水平垂直居中：

1.通过定位实现(必须知道子元素的宽高)

 <style>
.parent{
        position: relative;
        height:200px ;
        background-color: red;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: aqua;
                /*left: 50%;
                top: 50%;*/
                /* margin-left: -50%;*/  /*子元素宽的一半*/
                /*margin-top: 50%;*/    /*子元素高的一半*/
      
        left:calc(50% - 50px);
                top:calc(50% - 50px);
    }
</style>
<body>
    <div class="parent">
        <div class="child">水平垂直居中</div>
    </div>
</body>

2.通过定位 + transform (不知道子元素的宽高时)

<style>
    .parent{
        position: relative;
        height:200px;
        background-color: red;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: aqua;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
    }
</style>
<body>
    <div class="parent">
        <div class="child">水平垂直居中</div>
    </div>
</body>

3.通过定位 + margin(给子元素添加)

<style>
    .parent{
        position: relative;
        height:200px;
        background-color: red;
    }
    .child{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: aqua;
        left: 0px;
        top: 0px;
        right: 0px;
        bottom: 0px;
        /* 原理：子元素就会填充父元素的所有可用空间，所以，在水平垂直方向上，就有了可分配的空间 */
        margin: auto;/*实现水平垂直居中*/
       
    }
</style>
<body>
    <div class="parent">
        <div class="child">水平垂直居中</div>
    </div>
</body>

4.通过padding来实现

<style> 
    .parent{
        padding:50px;
        background-color: red; 
    }
    .child{
        height: 200px;
        /* 因为没有给父元素设置宽高，所以父元素的宽高就是子元素的宽高，父元素的背景颜色就会被子元素的背景颜色覆盖 */
        background-color: aqua;
    }
</style>
<body>
    <div class="parent">
        <div class="child">水平垂直居中</div>
    </div>
</body>

5.通过flex布局（给父元素添加）

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

6 .通过伪元素

 <style>
   .parent{
        height: 200px;
        text-align: center;/*实现了水平居中*/
        background-color: black;
    }
    .child{
        display: inline-block;/*text-align: center：相对于行内块元素才有效*/
        width: 100px;
        height: 100px;
        vertical-align: middle;/*针对垂直方向的同一块元素*/
        background-color:brown ;
    }
    .parent::before{
        content: "";
        display: inline-block;/*伪元素默认是行内元素*/
                width:20px;
        height: 200px;
        vertical-align: middle;
    }
</style>
<body>
    <div class="parent">
        <div class="child">水平垂直居中</div>
    </div>
</body>

7. 通过calc（宽高相等）

<style>
   .parent{
        width: 400px;
        height: 400px;
        background-color: blue;
    }
    .child{
        width: 100px;
        height: 100px;
        padding: calc((100% - 100px)/2);
        /* 100%：就是父元素的宽高   100px：就是子元素的宽高*/
        /* 结果是150px,所以子元素有一个上下左右都是150px的padding值,再加上其自身的宽高,就是父元素的宽高 ,*/
        /* 这时,子元素的大小会和子元素的大小一样,从而覆盖了父元素的背景颜色 */
        background-clip: content-box;/* 让背景颜色只对content生效,而不对padding生效 */
        
    }
</style>
<body>
    <div class="parent">
        <div class="child">水平垂直居中</div>
    </div>
</body>