属性	描述
display	指定HTML元素的盒子类型
flex-direction	指定弹性盒子中子元素的排列方式
justify-content	设置弹性盒子中元素在主轴方向上的排列方式
align-items	设置弹性盒子中元素侧轴方向上的对齐方式
flex-flow	flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap
align-content	用于控制多行项目的对齐方式

通过给父盒子设置弹性布局实现水平垂直居中，代码示例如下


            .father {
                width: 200px;
                height: 200px;
                background: red;
                display: flex;
                /* 实现水平方向上居中 */
                justify-content: center;
                /* 实现垂直方向居中 */
                align-items: center;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
            }
            
            <div class="father">
                <div class="son"></div>
            </div>

实现效果如下:

2.2.display:grid网格布局实现

和弹性布局实现思路一样,直接给父盒子设置为网格布局即可


            .father {
                width: 200px;
                height: 200px;
                background: red;
                display: grid;
                /* 实现水平方向上居中 */
                justify-content: center;
                /* 实现垂直方向居中 */
                align-items: center;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
            }
 
            <div class="father">
                <div class="son"></div>
            </div>

2.3.table表格布局实现

通过父元素为display:table-cell,将子元素设置为display:inline-block。


            .father {
                width: 200px;
                height: 200px;
                background: red;
                display: table-cell;
                /* 垂直方向居中 */
                vertical-align: middle;
                /* 水平方向居中 */
                text-align: center;
            }
            .son {
                display: inline-block;
                width: 100px;
                height: 100px;
                background: green;
            }
            <div class="father">
                <div class="son"></div>
            </div>

2.4.定位+margin:auto实现

通过子绝父相，并且给子元素（left,top,right,botton）都设置为0，那么此时若不给子元素设置宽高，子元素就实现了自适应。

大家可以仔细想以下，当给这四个属性的两个设置时，固定了两侧的位置，就确定了子元素的位置，而当将四个属性都设置值时，就确定了该元素的宽高。


            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                margin: auto;
            }
 
            <div class="father">
                <div class="son"></div>
            </div>

2.5.定位+margin:负值

通过子绝父相确定子元素的位置，再通过margin移动子元素达到子元素水平垂直居中的效果

具体实现思路如下:

先给父元素设置为相对定位，再对子元素设置绝对定位，top:50%,left:50%,代码如下


            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 50%;
                left: 50%;
            }

但此时的没有达到我们想要的效果

但是我们此时如果再使用margin 对子元素的位置进行调整，就可以达到子元素水平垂直居中的效果，margin-left的值为子元素自身宽度的一半。margin-top的值为子元素自身高度的一半。


            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 50%;
                left: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }

至此，子元素达到了效果

2.6.定位+transform

和5.定位+margin思路相同，都是通过绝对定位初步确定位置，然后再根据 transform调整位置，利用transform(-50%,-50%)宽高都位移子元素自身宽高的一半


            .father {
                width: 200px;
                height: 200px;
                position: relative;
                background: red;
            }
            .son {
                width: 100px;
                height: 100px;
                background: green;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

三、小结

当我们不知道元素的宽高时，我们仍可以实现水平垂直居中的方法:flex布局,grid布局,定位+auto,定位+transform。

我们最常用的是margin:0 auto 和弹性盒子flex实现居中，方便且不用知道盒子宽高也可以实现。

这些就是常见的使元素垂直居中的方法。欢迎大家评论区讨论，一起学习。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/702723