CSS实现垂直水平居中的三个方法：(1)固定宽高 (2)不固定宽高 (3)Flex

这两天迷上逛一些前端技术网站和论坛了，据说学前端要学会记录才能加深印象，所以有事没事还是写些随笔吧。

以前还在一个公司的面试试卷里做到过：

垂直居中:

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