1、利用inline元素和伪元素
设置伪元素。vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。
即:有两个行内元素a和b,a和b都是img,
如果a加了vertical-align:middle样式,b的 底部(基线) 就会对齐a的中间位置;
如果a和b都加了一个vertical-align:middle样式。
那么就互相对齐了对方的中间位置;
也就是它们在垂直方向上的中线对齐了。
而伪元素的display属性默认值为inline
行内元素是无法设置宽高的
想要设置宽高需要将之设置为block或者inline-block。
.container{
width: 100%;
height: 100%;
background-color: skyblue;
}
.container:after{
content:"";
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
.img{
width: 200px;
vertical-align: middle;
}
<div class="container">
<img class="img" src="../assets/img.jpg" alt="">
<img class="img" src="../assets/img.jpg" alt="">
</div>
2、利用absolut和translate
利用绝对定位垂直居中,
子元素==top:50%;==参照的是父元素的高度
==translateY(-50%);==参照的是自身高度。
注:仅使用于单独的子元素垂直居中
.container{
width: 100%;
height: 100%;
position: relative;
background-color: skyblue;
}
img{
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 200px;
}
<div class="container">
<img src="../assets/pic.png" alt="">
</div>
3、利用table-cell
把父元素display设置为table-cell,
父元素会作为一个表格单元格显示
可以设置其子元素的垂直对齐方式vertical-align:middle;
注:父元素宽高必须固定,不能使用百分比
.container{
width: 100vw;
height: 50vh;
background-color: skyblue;
display: table-cell;
vertical-align: middle;
}
img{
height: 100px;
}
<div class="container">
<img src="../assets/pic.png" alt="">
<img src="../assets/pic.png" alt="">
</div>
还可以用于多行文字居中
.container-multi{
width: 100%;
height: 500px;
background-color: skyblue;
font-size: 84px;
display: table-cell;
vertical-align: middle;
}
<div class="container-multi">
多行文字居中啊。多行文字居中啊。多行文字居中啊。多行文字居中啊。
</div>
4、利用flex
把父元素display设置为flex
可以设置其子元素的垂直对齐方式align-items: center
.container{
width: 100%;
height: 100%;
background-color: skyblue;
display: flex;
align-items: center;/* 垂直居中 */
/* justify-content: center; 水平居中*/
}
img{
height: 200px;
}
<div class="container">
<img src="../assets/img.jpg" alt="">
<img src="../assets/img.jpg" alt="">
</div>
5、利用line-height
父元素line-height与height相等即可,
仅适用于单行文字居中。
.container{
width: 100%;
height: 500px;
line-height: 500px;
background-color: skyblue;
font-size: 84px;
}
<div class="container">
单行文字居中
</div>