关于CSS制作水平/垂直居中对齐问题
作为前端开发者，在制作Web页面时都有碰到CSS制作水平垂直居中的问题，我想大家都有研究过或者写过，特别是其中的垂直居中，更是让人烦恼。这段时间，我收集了几种不同的方式制作水平/垂直居中方法，我会将这几种方法分别介绍给大家，以供大家参考。或许对于像我们这样的初学者来说会有一定的帮助。
一、水平居中：
1.margin:0 auto
这种方法主要使用margin: 0 auto配合元素的width来实现水平居中的效果；使用该方法实现元素水平居中一定要让元素满足两个条件：其一，元素需要有一个固定宽度值；其二元素的margin-left和margin-right都必须设置为auto，这两个条件少了任何一个都无法让元素达到水平居中的效果。
div{
width:400px;
margin:0 auto;
}
此方法使用水平居中，支持所有浏览器运行，是大家用得比较多，而且也是最常用、也是最凑效的方法。
2.text-align:center
这种方法主要是针对单行文本居中或者table格式居中，主要运用的是text-align:center让元素水平居中；
body{text-align: center;
该方法text-align有三个属性值：left|center|right，分别对应向左对齐，居中对齐，向右对齐，比较常用，推荐。
3.<center></center>(不建议使用)
对于html4中已经淘汰的center标签，照样可以做到水平居中对齐，但是不建议使用；
4.position定位
对于定位也是常用的，在这里当然也可以采用定位的方法来实现水平居中：
body{
position:absolute;
left:50%;
}
采用定位居中虽然常用，在使用过程中要计算偏移值，才能准确实现水平居中。
5.margin/padding
该方法对于div块中的水平居中对其，就是试着调：margin和padding，使用恰当合适的位置，会实现水平居中对其效果。
6.display:inline-block
有时使用display:inline-block来实现水平居中，也有效果哦，但要使用这个就得在其父元素上设置text-align.
body{
text-align:center;
}
.content{
display:inline-block;
}
7.css3提供的弹性盒模型
弹性盒模型作为css3新引入的盒模型，能够轻松地创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局 ，对于它的实现原理大家可以通过下面的代码可以初步认识，要触发弹性盒模型适用 display: box， “box-orient”定义分布的坐标轴：vertical（垂直分布）和horizional（水平分布），默认情况下，盒子并不具有弹性，如果box-flex的属性值至少为1时，则变得富有弹性。如果盒子不具有弹性，它将尽可能的宽使其内容可见，且没有任何溢出，其大小由“width”和“height”来决定（或min-height、min-width、max-width、max-height）
<style type="text/css">
body{
display: box;
box-orient: horizontal;
}
#box1 {
box-flex: 2;
}
#box2 {
box-flex: 1;
}
#box3 {
box-flex: 1;
}
</style>
<body>
<div id="box1">1</div>
<div id="box2">2</div>
<div id="box3">3</div>
</body>
8.负外边距（margin-left：-(width/2)px）
负外边距同样可以解决水平居中对其的问题，但是要用到绝对定位（position：absolute;）；
.divr{backgrond-color: #000;position: absolute;left: 50%;width: 1000px;margin-left: -500px;}
9.css3中的fit-content
fit-content是CSS3中给width属性新加的一个属性值，它配合margin可以让我们轻松的实现水平居中的效果；
<style type="text/css">
.page ul {
width: -moz-fit-content;width:-webkit-fit-content;
width: fit-content;margin-left: auto;
.page li {
line-height: 25px;margin: 0 5px;float: left;
}
.page a {
display: block;color: #f2f2f2;
text-shadow: 1px 0 0 #101011;padding: 0 10px;border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.page a:hover {
text-decoration: none; box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
</style>
<div class="page">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
10.css3中的flex
CSS3中的flex是一个很强大的功能，它能让我们的布局变得更加灵活与方便，而且它的实现相当便捷，扩展性强，唯一的缺点就是目前浏览器的兼容性较差。
<style type="text/css">
.page {
display: -webkit-box;
-webkit-box-orient: horizontal;-webkit-box-pack: center;display: -moz-box;
-moz-box-orient: horizontal;-moz-box-pack: center;
display: -o-box;-o-box-orient: horizontal;
-o-box-pack: center;display: -ms-box;-ms-box-orient: horizontal;-ms-box-pack: center;
display: box;box-orient: horizontal;box-pack: center;
}
.page li {
line-height: 25px;margin: 0 5px;float: left;
}
.page a {
display: block;color: #f2f2f2;
text-shadow: 1px 0 0 #101011;
padding: 0 10px;border-radius: 2px;
box-shadow: 0 1px 0 #5a5b5c inset,0 1px 0 #080808;
background: linear-gradient(top,#434345,#2f3032);
}
.page a:hover {
text-decoration: none;box-shadow: 0 1px 0 #f9bd71 inset,0 1px 0 #0a0a0a;
background: linear-gradient(top,#f48b03,#c87100);
}
</style>
<div class="page">
<ul>
<li><a href="#">Prev</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">Next</a></li>
</ul>
</div>
二、垂直居中：
1.line-height行高
该方法能实现垂直居中，但只能是单行文本居中（可适用于所有浏览器）：
.content{
height:100px;
line-height:100px;
}
2.position定位
该方法跟水平居中一样，垂直居中也可以采用定位的方法，但它的缺点是当没有足够的空间时，元素会消失。
.content{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
或者是：
.content{
position:absolute;
top:50%;
}
3.float浮动
当然我们同样可以设置flaot浮动来达到垂直剧居中的效果，对于浮动，我们需要在之后清除，并显示在中间。
.content{
float:left;
height:50%;
margin-bottom:-120px;
}
.footer{
clear:both;
height:240px;
position:relative;
}
4.vertical-align: middle
vertical-align属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 该方法可以随意改变元素高度，但在IE8中无效。
.content{
display:table-cell;
vertical-align:middle;
}
上面主要是收集了多种方法让元素实现垂直居中，大家可以在这几种方法上稍做改变就能实现其水平居中，这样就达到了元素水平垂直居中的效果。实现方法很多，大家可以根据需要选择不同的方法。以上是我收集并总结的部分方法，仅供参考，希望能给需要的朋友有所帮助。