绝对定位让元素完全居中的两种方法

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq1014156094/article/details/68062206

方法一:(不能微调)

父容器:

position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;

方法二:(可微调)

要居中的元素:

position: absolute;
top: 50%;
left: 50%;
margin-top: -100px; /* 元素高度的一半 */
margin-left: -100px; /* 元素宽度的一半 */

方法三:(不能微调)

父容器:

display: flex;
flex-direction: row: /* row 为横向排列,column 为纵向排列 */
align-items: center;
justify-content: center;

 
展开阅读全文

没有更多推荐了,返回首页