css之水平垂直居中方式

布局中常用到的水平垂直居中问题

作为一个前端开发人员，布局是我们日常工作中解除最多的，而水平垂直居中也必不可少的出现，面试中也经常遇到噢～

一、position:absolute(固定宽高)

width: 100px;
height: 100px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;

 

二、position+transform

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

 

三、CSS3-Flex布局(ps:本人最常用～嘿嘿)

关于Flex，可以看看阮一峰老师的这篇文章，讲解的很仔细哟～  http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

.outer{
      display: flex;
      align-items:center;
      justify-content: center;
 }