标签：class form blog end tar lex 自己 pre 情况
在做页面布局的时候，多多少少都会遇到这个话题，如何使子元素居中于父元素中？？？
对于这个问题，方法多种多样，之前也有对这个问题进行总结过，answer应该不少于10种吧。至于使用哪种方法比较好，我觉得这很大程度看个人喜好。
我经常使用的最多也就是一下几种:(以最简单的结构举例,元素宽高略 )
<div class=‘parent‘>
<div class=‘‘child></div>
</div>
1、定位
.parent{
position:relative;
}
.child{
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
2、定位+transform
.parent{
position:relative;
}
.child{
position:absolute;
top:50%;
right:50%;
transform:translate(-50%,-50%);
}
3、height +line-height
.parent{
height: 100px;
}
.child{
line-height: 100px;
}
4、table
.parent{
display: table-cell;
vertical-align: middle;
}
.child{
margin:auto;
}
。。。。
以上方法其实已经足够应付日常中如何使元素居中这个问题，but，早前听说过有一种新布局，可以更加优雅的解决这个问题，那就是flex布局。
其实flex布局已经不是什么新鲜的事物了，早在2009年，W3C就提出了一种新方案，但是由于各种浏览器兼容性的问题，这种方案一直没有推广开来。记得很在早前就有使用过一个叫swiper的移动端插件，看了其中的源代码，发现它里面就使用了flex布局，草草看了一下，也知道大概意思，但是之后的项目一直没有机会使用，我也就没有再关注过。前端时间去看看这种方案的兼容性，95%以上已经完美支持这种解决方案了。so。。。可以大胆的使用了。
flex布局也叫弹性布局，相比传统的布局以及bootstrap的栅格布局，flex布局显得更加的灵活，代码写起来也更加的优雅。
直接插入主题，怎么使用flex使元素居中？
首先先明确基本概念：任何的容器都可以指定flex布局，容器里面的子元素自动成为容器的成员，也叫项目，flex item
.parent{
display: flex;
display: -webkit-flex;
justify-content:center;
align-items:center;
}
简单几行，就可以使子元素完全居中于父元素中了。。。
接下来，再看看flex布局的其他使用情况。
我们可以把弹性布局想成一个可以朝四个方向拉伸的盒子。
容器元素有六个属性，分别是：
flex-direction
决定项目元素的排列方向,一般有四个值
row（默认值，主轴为水平方向，起点是左端，其他见名知意） | row-reverse | column | column-reverse;
flex-wrap
决定项目元素都在一条线上，一般有三个取值
nowrap（默认值，不换行） | wrap | wrap-reverse;
flex-flow
flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。
justify-content
定义了项目在主轴上的对齐方式。
flex-start （默认值）：左对齐| flex-end | center | space-between | space-around;
align-items
定义项目在交叉轴上如何对齐。
align-content
定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。
。
。
。
对于这类的学习，平时用到的时候，再去查对应的属性应用就可以了，更重要的是在学习一项新的东西之后，慢慢加入自己的体会，没在实践中去总结。
标签：class form blog end tar lex 自己 pre 情况
原文地址：http://www.cnblogs.com/leaf930814/p/6340756.html
