HTML中子盒子在父盒子中水平垂直居中的方法

效果图:

垂直水平居中

一、定位 + transform(不需要知道盒子宽高):

.father{
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.son{
    width: 100px;
    height: 100px;
    background-color: blue;
    /*实现水平垂直居中*/
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

二、flex 弹性盒(不需要知道盒子宽高):

.father{
    width: 300px;
    height: 300px;
    background-color: red;
    display: flex;
    justify-content: center;
    algin-item: center
}

三、flex 弹性盒 + margin: auto(不需要知道盒子宽高):

.father {
    display: flex;
    width: 300px;
    height: 300px;
    background: red;
}
.son {
    margin: auto;
    width: 100px;
    height: 100px;
    background: blue;
}

四、定位 + margin: auto(不需要知道盒子宽高):

.father{
    width: 300px;
    height: 300px;
    background-color: red;
    position: relative;
}
.son{
    width: 100px;
    height: 100px;
    background-color: blue;
    /*实现水平垂直居中*/
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

五、把父元素转换成表格用 vertical: middle 垂直居中,子元素转换成行内块用 text-aligin: center 居中(不需要知道盒子宽高):

.father {
    height: 300px;
    width: 300px;
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    margin: 0 auto;
}

.son {
    display: inline-block;
    vertical-align: middle;
    height: 100px;
    width: 100px;
    background-color: blue;
}

转载请注明来源,欢迎对文章中的引用来源进行考证,欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论,也可以邮件至 848130454@qq.com

文章标题:HTML中子盒子在父盒子中水平垂直居中的方法

文章字数:346

本文作者:Spicy boy

发布时间:2021-02-16, 10:12:04

最后更新:2021-03-31, 10:43:24

原始链接:http://www.spicyboy.cn/2021/02/16/HTML%E4%B8%AD%E5%AD%90%E7%9B%92%E5%AD%90%E5%9C%A8%E7%88%B6%E7%9B%92%E5%AD%90%E4%B8%AD%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD%E7%9A%84%E6%96%B9%E6%B3%95/

版权声明: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。

目录
×

喜欢就点赞,疼爱就打赏