水平垂直居中

最新推荐文章于 2025-05-13 17:44:16 发布

未尛

最新推荐文章于 2025-05-13 17:44:16 发布

阅读量134

点赞数

分类专栏： css3 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_37956730/article/details/80978946

版权

css3 专栏收录该内容

2 篇文章

订阅专栏

1 , 利用表格的特性

<!--父级-->
parent{
    width:500px ; 
    height:500px;
    display:table-cell ; 
    text-align:center ; 
    vertical-align:middle ; 
}
<!--子级-->
child{
    display:inline-block ; 
}
2 , 利用绝对定位(es6)

<!--父级-->
parend{
    position:relative ; 
}
<!--子级-->
child{
    position:absoult ; 
    width:100px;
    height:100px;
    left:calc(50% - 50px) ; 
    top:calc(50% - 50px) ; 
}
3 , 利用margin来直接填充

<!--父级-->
parent{
    position:relative ; 
}
<!--子级-->
child{
    width: 100px;
    height: 100px;
    background-color: red ; 
    position: absolute;
    left: 50% ; 
    top: 50% ; 
    margin-left: -50px;
    margin-top: -50px;
}
4 , 利用css3的transform

<!--父级-->
parent{
    position:relative ; 
}
<!--子级-->
child{
    width: 100px;
    height: 100px;
    background-color: red ; 
    position: absolute;
    left: 50% ; 
    top: 50% ; 
    transform: translate(-50% , -50%) ; 
}
5 , 利用margin和绝对定位

<!--父级-->
parent{
    position:relative ; 
}
<!--子级-->
child{
    width: 100px;
    height: 100px;
    background-color: red ; 
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto ;  
}
6 , 利用flex属性

<!--父级-->
parent{
    display:flex ; 
}
<!--子级-->
child{
    margin:auto ; 
}