水平居中设置
1，行内元素设置text-align：center
2，定宽块状元素
设置左边margin值为auto
3，不定宽块状元素
a：在元素外加入表标签（完整的，表元素写在td内，然后设置margin的值为auto
b：给该元素设置displa：inine方法
c：父元素设置position：relative和left：50％，子元素设置position：relative 和 left：50％
垂直居中设置
1，父元素高度确定的单行文本
设置height = line-height
2，父元素高度确定的多行文本
a：插入方法和水平居中一样，设置vertical-align：middle
b：先设置display：table-cell再设置vertical-align：middle
开始这些东西之前也可以测试一下你对 HTML 了解多少，让我们测试一下吧， 小测验：你对HTML5有了解多少
今天我们就细数一下几种方法：
设置height = line-height
2，父元素高度确定的多行文本
a：插入方法和水平居中一样，设置vertical-align：middle
b：先设置display：table-cell再设置vertical-align：middle
开始这些东西之前也可以测试一下你对 HTML 了解多少，让我们测试一下吧， 小测验：你对HTML5有了解多少
今天我们就细数一下几种方法：
1，使用position：absolute，设置left，top，margin-left，margin-top的属性
.one {
position：absolute;
宽度：200像素;
高度：200像素;
顶部：50％;
左：50％;
边距：-100px;
保证金左：-100px;
背景：红色;
}
这种方法基本浏览器都能够兼容，不足之处就是需要固定宽高
2，使用position：fixed，同样设置left，top，margin-left，margin-top的属性
.two {
position：fixed;
宽度：180像素;
高度：180像素;
顶部：50％;
左：50％;
边距：-90px;
保证金左：-90px;
背景：橙色;
}
大家都知道的position：fixed，IE是不支持这个属性的
3，利用position：fixed属性，margin：auto这个必须不要忘记了
。.three {
position：fixed;
宽度：160像素;
高度：160像素;
顶部：0;
右：0;
底部：0;
左：0;
保证金：汽车;
背景：粉红色;
}
4，利用position：absolute属性，设置top / bottom / right / left
.four {
position：absolute;
宽度：140px;
高度：140px;
顶部：0;
右：0;
底部：0;
左：0;
保证金：汽车;
背景：黑色;
}
5，利用display：table-cell属性使内容垂直居中
.five {
display：table-cell;
垂直对齐：中部;
文本对齐：中心;
宽度：120像素;
高度：120像素;
背景：紫色;
}
6，最简单的一种使行内元素居中的方法，使用line-height属性
.six {
width：100px;
高度：100像素;
行高：100像素;
文本对齐：中心;
背景：灰色;
}
这种方法也很实用，比如
使用文字垂直居中对齐
7，使用css3的显示：-webkit-box属性，再设置-webkit-box-pack：center / -webkit-box-align：center
.seven {
width ：90像素;
高度：90像素;
显示：-webkit盒;
-webkit-箱包装：中心;
-webkit箱对齐：中心;
背景：黄色;
颜色：黑色;
}
.seven {
width ：90像素;
高度：90像素;
显示：-webkit盒;
-webkit-箱包装：中心;
-webkit箱对齐：中心;
背景：黄色;
颜色：黑色;
}
8，使用css3的新属性transform：translate（x，y）属性
.eight {
position：absolute;
宽度：80px;
高度：80px;
顶部：50％;
左：50％;
变换：翻译（-50％， - 50％）;
-webkit变换：翻译（-50％， - 50％）;
-moz变换：翻译（-50％， - 50％）;
-ms变换：翻译（-50％， - 50％）;
背景：绿色;
}
这个方法可以不需要设定固定的宽高，在移动端用的会比较多，在移动端css3兼容的比较好
9，最高大上的一种，使用：元素
.nine {
position：fixed;
显示：块;
顶部：0;
右：0;
底部：0;
左：0;
文本对齐：中心;
背景：RGBA（0,0,0，0.5）;
}
.nine：before {
content：'';
显示：内联块;
垂直对齐：中部;
高度：100％;
}
.nine .content {
display：inline-block;
垂直对齐：中部;
宽度：60像素;
高度：60像素;
行高：60像素;
红色;
背景：黄色;
}
总而言之所有的居中的方法就是你必须要掌握css属性的这个概念 HTML DIV + CSS ，你掌握了就可以好好的运用这些居中的东西了
文章来源：
http：// weixin.qq.com/r/azrB2Yb E6NuXrcK69295 （二维码自动识别）
作者：徐尤熙
链接：HTTPS：//www.zhihu.com/question/20543196/answer/89218605
来源：乎知
作者获得授权著作权归作者所有商业转载请联系。，非商业转载请注明出处。