1.利用定位 + margin:auto
2.flex布局
3.grid布局
一、利用position+margin:auto
<style>
.outer {
position: relative; /*父亲相对定位*/
width: 200px;
height: 200px;
background-color: red;
}
.inner {
position: absolute; /*儿子绝对定位*/
top: 0;
bottom: 0;
left: 0;
right: 0;
margin:auto; /*上下左右外边距为auto*/
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>
二、利用flex文章来源：https://www.toymoban.com/news/detail-632979.html
<style>
.outer {
display: flex; /*弹性布局*/
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
width: 200px;
height: 200px;
background-color: red;
}
.inner {
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<div class="outer">
<div class="inner"></div>
</div>三、gird布局文章来源地址https://www.toymoban.com/news/detail-632979.html
<style>
.father {
display: grid;
align-items:center;
justify-content: center;
width: 200px;
height: 200px;
background: skyblue;
}
.son {
width: 10px;
height: 10px;
border: 1px solid red
}
</style>
<div class="father">
<div class="son"></div>
</div>到了这里，关于CSS水平垂直居中的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
