面试题：不知宽高的元素居中方法集合

lvshun_19991027

于 2020-08-05 22:56:33 发布

阅读量180

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.youkuaiyun.com/qq_43799743/article/details/107827441

版权

4 篇文章

订阅专栏

　　方法1：反向移动

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

　　方法2：flex布局

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

　　方法3：四向定位　　

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

　　方法4：表格　

father：



　　　　display:table;

　　　　text-algin:center;

son：

display:table-cell;

vertical-align:middle;