一个不固定宽高的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;

猜你喜欢

转载自blog.csdn.net/jiangqing993/article/details/79413916