CSS+div => 水平居中、垂直居中、水平垂直居中

最新推荐文章于 2024-03-11 18:35:59 发布

Ton_One

最新推荐文章于 2024-03-11 18:35:59 发布

阅读量369

点赞数

分类专栏： CSS 文章标签：水平居中垂直居中水平垂直居中

本文链接：https://blog.youkuaiyun.com/Ton_One/article/details/83745181

版权

CSS 专栏收录该内容

2 篇文章

订阅专栏

本文详细介绍了使用CSS实现元素在父容器中水平居中、垂直居中及同时水平垂直居中的多种方法，包括flex布局、定位及table-cell等，适合初学者及需要复习相关知识点的前端开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML代码

<div class="father">
   <div class="son"></div>
</div>

CSS代码

.father {
    width: 500px;
    height: 300px;
    background-color: lightskyblue;
}

.son {
    width: 100px;
    height: 100px;
    background-color: lightgreen;
}

初始效果

以下代码都是基于上面代码添加

A => 水平居中

效果预览

flex方式

.father {
    display: flex;
    justify-content: center;
}

定位 + left方式(已知宽度可以用margin-left, 未知宽度用transform)

.father {
    position: relative; /*想知道为什么加这一句，去掉看son对谁居中就知道了*/
}
.son {
    position: absolute;
    left: 50%;
    margin-left: -50px; /* 已知宽度 */
    /*transform: translateX(-50%);/* 未知宽度，这里的50%是参考自身实际宽度 */
}

margin auto方式

.son {
    margin: 0 auto;
}

B => 垂直居中

效果预览

flex方式

.father {
    display: flex;
    align-items: center;
}

定位 + top方式(已知、未知宽度同理)

.father {
    position: relative;
}
.son {
    position: absolute;
    top: 50%;
    margin-top: -50px;
    /*transform: translateY(-50%);*/
}

table-cell + vertical-align方式

.father {
    display: table-cell;
    vertical-align: middle;
}

C => 水平垂直居中

效果预览

flex方式

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

定位 + top left方式(已知、未知宽度同理)

.father {
    position: relative;
}

.son {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
/*transform: translate(-50%,-50%);*/
}

table-cell + vertical-align + margin auto方式

.father {
    display: table-cell;
    vertical-align: middle;
}

.son {
    margin: auto;
}

吃完东西擦嘴，学完东西总结

如果不考虑兼容性，那就用flex吧，其次，定位的方式也常用，table-cell比较冷门，多一条后路
跟我念：flex、定位、table-cell … flex、定位、table-cell

什么？不够，那继续看这个吧 >> 何居中一个元素（终结版）