几个我自己常用的水平置中或垂直置中的方式

利用Margin置中

　　当物件设定abosolute之后，预设它是抓不到整体可运用空间的範围，所以 margin: auto 此时会失效，但当你设定了 top: 0; bottom: 0 时，绝对定位物件就抓到可运用的空间了，这时你的 margin: auto 就生效了，如果你的绝对定位物件需要水平置中于父层，那你同样可以设定 left: 0; right: 0; 来让绝对定位物件取得空间可运用範围，再让 margin-left 与 margin-right 设定为 auto 即可置中。但此方式的缺点是你的定位物件必须有固定的宽高（％数也可）才能正常置中。

CSS:

.box{  width: 500px;  height: 250px;  border: 1px solid #f00;  position: relative;}.content{  position: absolute;  background: #ccc;  height: 70px;  width: 200px;*   top: 0;*   right: 0;*   bottom: 0;*   left: 0;*   margin: auto;}

在Position设定为relative或abosolute时使用transform置中

　　此方式应该算是最方便的了，因为此置中的定位物件不需要固定的宽跟高，我们利用绝对定位时的 left 跟 top 设定物件的上方跟左方各都为 50% ，再利用 translate(-50%, -50%) 位移置中物件自身宽与高的 50% 就能达成置中的目的了。我们使用 translate(-50%,-50%)的意思是，让物件的X轴移动-50%，此50%是以物件本身的宽度作为100%来做计算，所以不管你的物件宽度是多少，他都会自动跑负一半的位置，relative与abosolute最大的差别就是relative会以他原本的位置来做调整，abosolute则是以父元素来做调整。

CSS:

.box {  width: 500px;  height: 250px;  border: 3px solid green;  position: relative;}.content {  position: absolute;  width: 200px;  background: #000;  height: 70px;*   top: 50%;*   left: 50%;*   transform: translate(-50%, -50%);}

设定为Flex后利用align-item与justify-content来置中

　　这个方式的优点是此层不需设定高度即可自动置中，我们只要设定父层 display: flex 以及设定次轴置中属性 align-items: center就好了，我们可以利align-items这个属性来设定该子层资料垂直于「行」方向的位置，简单的说，倘若资料预设是横排(X轴)，那么 align-items 就是直排(Y轴)的方向，但是倘若资料是直排(Y轴)的话，那么 align-items 控制的就是横排(X轴)的方向
　　同样的，justify-content是用来设定主轴的置中属性，跟align-items完全相反的地方是他预设控制的地方为(X轴)物件的位置，当资料预设为直排的时候，他则是控制(Y轴)物件的位置

CSS:

.box {  width: 500px;  height: 250px;  border: 3px solid yellow;*   display: flex;*   align-items: center;*   justify-content: center;}.content {  width: 100px;  height: 100px;  background: thistle;  margin: 10px;}

text-align与Line-Height

　　设定Line-height(行高)是垂直置中最简单的方式，适用于「单行」的「行内元素」，若将 line-height 设成和高度一样的数值，则内容的行内元素就会被垂直置中，因为是行高，所以会在行内元素的上下都加上行高的 1/2，所以就垂直置中了！不过由此就可以看出，为什么必须要单行的行内元素，因为如果多行，第二行与第一行的间距会变超大，就不是我们所期望的效果了。
　　如果是单行的「行内元素」，有时候我们也会需要设定水平置中，那就会使用到text-align:center的这个语法，这个语法非常的单纯，不管有几行都一样会做水平置中的动作，不用考虑到像是设定Line-Height的时候会出现的多行问题。

CSS:

.content {  font-size: 24px;  color: #fff;  background-color: #00aa00;  width: 500px;  height: 250px;*   text-align: center;*   line-height: 250px;}

参考文章:

oxxoStudio:垂直置中的三个方法

CSScoke