对于如何实现居中效果,主要从三个方面列举
p{
text-align:center;
}
表现结果:p 标签元素下的子元素水平居中
div{
margin:0 auto;
}
表现结果:div 标签元素相对于父元素水平居中
div{
position: absolute;
left: 50%;
transform: translate(-50%);
}
表现结果:div 标签元素相对于父元素水平居中
height = line-height
div{
height: 100px;
line-height: 100px;
}
表现结果:div 标签元素下的子元素垂直居中
.wrapper{
height: 100px;
width: 100px;
}
.box{
display: inline-block;
}
.box-v{
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
<div class="wrapper">
<div class="box">文本div>
<div class="box-v">div>
表现结果: .box 元素相对于父元素垂直居中,但其实是 .box 元素的基线与 .box-v 元素的中线对齐,而恰好 .box-v 元素的高度与父元素一致
vertical-align 属性设置元素的垂直对齐方式。该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐
vertical-align 属性只能作用在 display 计算值为 inline、inline-block,inline-table 或 table-cell 的元素上
浮动和绝对定位会让元素块状化,因此这两种情况也不会使vertical-align属性生效
div{
position: absolute;
top: 50%;
transform: translate(0,-50%);
}
表现结果:div 元素相对于父元素垂直居中
div{
width: 100px;
height: 80px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
div{
width: 100px;
height: 80px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -80px/2px
margin-left: -100px/2px;
}
表现结果:div 元素相对父元素或文档水平垂直居中
div{
dispaly: flex;
justify-content: center;
align-items: center;
}
表现结果:div 元素下的子元素垂直居中
div{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
表现结果:div 元素相对于父元素或文档水平垂直居中