欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

div内部未知宽高的元素的垂直居中

程序员文章站 2022-05-01 23:25:32
...

未知宽高的元素的垂直居中

三种方法

  1. 弹性盒display:flex;
//对父元素设置:
display: flex;  justify-content: center;  align-items: center;
  1. 弹性盒display:table-cell;
//父元素
display: table-cell;
text-align: center;
vertical-align: middle;
//子元素设置
display: inline-block;
vertical-align: middle;
  1. 定位平移
//父元素
position: relative;
//子元素
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
相关标签: 元素的垂直居中