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;

 }

巴特西