标签：
这两天迷上逛一些前端技术网站和论坛了，据说学前端要学会记录才能加深印象，所以有事没事还是写些随笔吧。
以前还在一个公司的面试试卷里做到过：
垂直居中:
1.父元素设置position:relative, 子元素设置position:absolute; top:50%; margin-top: -元素高度
2.height: 500px; line-height: 500px;
水平居中:
1.text-align：center
2.margin: 0 auto;
以上是我之前写的答案，接下来看看他人的智慧吧！
1.宽高固定元素
.parent { position: relative; } .child { width: 300px; height: 100px; padding: 20px; position: absolute; top: 50%; left: 50%; margin: -70px 0 0 -170px; }
2.宽高不固定元素，将元素的中心和父容器的中心重合
.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
3.flexbox
.parent { display: flex; justify-content: center; //主轴对齐方式 align-items: center; //侧轴对齐方式 }
想要学习更多关于flexbox布局，请移步: http://www.w3cplus.com/blog/666.html
原文出处: http://www.w3cplus.com/css/centering-css-complete-guide.html
CSS实现垂直水平居中的三个方法：(1)固定宽高 (2)不固定宽高 (3)Flex
标签：
原文地址：http://www.cnblogs.com/susan-90/p/4980712.html
