让一个不固定高度的div,保持垂直水平居中的方法

一、使用flex布局

给父元素设置:

display:flex; justify-content:center; align-items:center;

二、使用CSS3 的 transform

父元素设置:

position:relative;

子元素设置:

position:absolute;
top:50%;
left:50%;
transform:translate(-50%, -50%);

三、设置display:table-cell方法

父元素设置:

display:table-cell;
vertical-align:middle;
text-align:center;

子元素设置:

display:inline-block;
posted @ 2020-10-16 17:11  PANIC404  阅读(165)  评论(0编辑  收藏  举报