居中定位css

标签：tom   css   splay   使用   垂直   top   transform   div   translate   

1. 已知元素的宽度和高度：
   .item {
   position: absolute;
   top: 50%;
   left: 50%;
   margin-top: -75px;
   margin-left: -75px;
   }
   .item {
   position: absolute;
   margin:auto;
   left:0;
   top:0;
   right:0;
   bottom:0;
   }

2. 未知元素的高度和宽度：
   .item {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%); / 使用css3的transform来实现 /
   }
   .parent {
   display: flex;
   justify-content:center;
   align-items: center;
   background: #AAA;
   height: 300px; / 注意这里需要设置高度来查看垂直居中效果 /
   }

居中定位css

标签：tom   css   splay   使用   垂直   top   transform   div   translate   

原文地址：https://blog.51cto.com/13507333/2375177