我们的示例代码全在此基础上修改:
......
<style>
* {
margin: 0;
padding: 0;
}
.par {
width: 600px;
height: 400px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}
.chi1 {
width: 60px;
height: 40px;
background-color: rgb(211, 205, 197);
}
</style>
............
<div class="par">
<div class="chi1">1</div>
</div>
1.flex 弹性布局居中
具体原理参考下面这篇博客:
flex 弹性布局_本郡主是喵的博客-CSDN博客
.par {
....
display: flex;
justify-content: center;
align-items: center;
}
2.垂直 + 水平居中内容
对于内容是行内式元素(内容大小撑起标签宽高)或文字,是有效的。
line-heignt == height ,能使文字垂直对齐,text-align:center,能使内容居中水平对齐
.chi1 {
.........
text-align: center;
line-height: 40px;
}
3. 采用绝对布局
父元素,采用相对布局,子元素采用相对布局。
我们利用方位属性,调至子元素相对于父元素的方位,达到居中的效果。文章来源:https://www.toymoban.com/news/detail-673406.html
PS: top 和bottom,right 和left属性都是相对的,调整一个,另外一个都会失效。文章来源地址https://www.toymoban.com/news/detail-673406.html
.par {
......
position: relative;
}
.chi1 {
.......
position: absolute;
top: 45%;
left: 45%;
/* bottom: 0;
right: 0; */
}
到了这里,关于居中一个元素(水平+垂直居中)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!