|
#写css时会遇到非常多垂直居中样式，区别的方式亦会达到一样的效果，以下方式可供参考。
如让<p> 在 <div>中垂直居中,其中div 标签的宽度、高度分别是400px, 1px的实线边框； p标签背景色是红色。
<div class="box">
<p>hello everyone</p>
</div>
办法一 ：grid布局重视浏览器是不是支持运用
<style>
.box {
width: 400px;
height: 400px;
border: 1px solid ;
display: grid;
justify-content: center;
align-items: center;
}
p {
bac公斤round: red;
}
办法二
.box {
width: 400px;
height: 400px;
border: 1px solid ;
display: grid;
justify-content: center;
align-content: center;
}
p {
bac公斤round: red;
}
办法三
.box {
width: 400px;
height: 400px;
border: 1px solid ;
display: grid;
}
p {
bac公斤round: red;
margin: auto;
}
办法四
.box {
width: 400px;
height: 400px;
border: 1px solid ;
display: flex;
}
p {
bac公斤round: red;
margin: auto;
}
办法五 :常用方式
.box {
width: 400px;
height: 400px;
border: 1px solid ;
display: flex;
justify-content: center;
align-items: center;
}
p {
bac公斤round: red;
}
办法六：p必要是inline或是line-block状态
.box {
width: 400px;
height: 400px;
border: 1px solid ;
display: table-cell;
vertical-align: middle;
text-align: center;
}
p {
bac公斤round: red;
display: inline-block;
}
办法七：margin必要设为0，绝对定位是元素的外边距相对参考元素的边框内壁
.box {
width: 400px;
height: 400px;
border: 1px solid ;
position: relative;
}
p {
bac公斤round: red;
position :absolute;
top: 50%;
left: 50%;
transform: translate(-50% ,-50%);
margin: 0;
}
办法八: 空标签的line-height的值必要与父元素的值相同
.box {
width: 400px;
height: 400px;
border: 1px solid ;
text-align: center;
}
.box::after {
content: ;
line-height: 400px;
}
p {
bac公斤round: red;
display: inline-block;
}
办法九:此办法必要设置p元素的宽高，否则充满父元素 （此办法已废弃不意见运用）
.box {
width: 400px
| 
发表于 2024-6-30 06:13:21