1. 使用text-align 和 vertical-align 和 inline-block实现水平垂直居中
html
<div class="parent"> <div class="child">使用vertical-align,text-align,inline-block实现水平垂直居中</div> </div>
css
.parent{ vertical-align: middle; text-align: center; height:300px; line-height: 300px; } .child{ display: inline-block; }
2. 使用positon实现水平垂直居中
html
<div class="parent"> <div class="child">使用positon实现水平垂直居中</div> </div>
css
.parent{ position: relative; height: 300px; } .child{ position: absolute; top: 50%; left:50%; transform: translate(-50%,-50%); }
3. 使用flex实现水平垂直居中
html
<div class="parent">使用flex实现水平垂直居中</div>
css
.parent{ display: flex; align-items: center; justify-content: center; height: 300px; }
时间: 2024-10-06 05:47:14