为方便理解，欢迎查看线上效果，在线试一试
一、利用margin:auto
元素有宽度和高度时，利用margin:auto设置元素水平垂直居中：
HTML代码如下：
<div class="div1"> <div class="center">
div>
div> CSS代码如下：
.div1 {
background-color: #eee; width: 200px; height: 200px; position: relative; } .div1 .center {
width: 50px; height: 50px; background-color: forestgreen; position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } 二、利用position: absolute
HTML代码：
<div class="div2"> <div class="center">
div>
div> 当已知元素宽度和高度时，可以设置position: absolute和margin为负的宽高的一半，CSS代码如下：
.div2 {
background-color: #eee; width: 200px; height: 200px; position: relative; margin-top: 20px; } .div2 .center {
width: 50px; height: 50px; background-color: rgb(34, 71, 139); position: absolute; left: 50%; top: 50%; margin-left: -25px; margin-top: -25px; } 当已知元素宽度和高度时，也可以利用calc计算属性设置top和left，CSS代码如下：
.center {
width: 50px; height: 50px; background-color: rgb(34, 71, 139); position: absolute; left: calc(50% - 25px); top: calc(50% - 25px); } 当元素宽度和高度未知时，可以设置position: absolute和transform: translate(-50%, -50%)，CSS代码如下：
.center {
width: 50px; height: 50px; background-color: rgb(34, 71, 139); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } 实现效果：
三、弹性盒子
通过为其父元素设置display: flex来实现居中。
HTML代码如下：
<div class="div4"> <div class="center">
div>
div> CSS代码如下：
.div4 {
background-color: #eee; width: 200px; height: 200px; position: relative; margin-top: 20px; display: flex; justify-content: center; align-items: center; } .div4 .center {
width: 50px; height: 50px; background-color: rgb(240, 248, 166); } 四、利用水平对齐和行高
设置text-align 和 line-height 实现单行文本水平垂直居中。
HTML代码如下：
<div class="div5"> <p class="center">我要居中
p>
div> CSS代码如下：
.div5 {
background-color: #eee; width: 200px; height: 200px; margin-top: 20px; } .div5 .center {
text-align: center; line-height: 200px; } 五、grid
HTML代码如下：
<div class="div6"> <p class="center">我要居中
p>
div> 在网格项目中设置justify-self、align-self或者margin: auto，CSS代码如下：
.div6 {
background-color: #eee; width: 200px; height: 200px; margin-top: 20px; display: grid; } .div6 .center {
align-self: center; justify-self: center; /* margin: auto; */ } 在网格容器上设置justify-items、align-items或justify-content、align-content，CSS代码如下：
.div6 {
background-color: #eee; width: 200px; height: 200px; margin-top: 20px; display: grid; align-items: center; justify-items: center; /* align-content: center; justify-content: center; */ } 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/217393.html原文链接：https://javaforall.net
