在div+css布局中，水平、垂直局中是很常用的，但对于像我这样的小白来说，经常会出现有些css设置不起作用，后来就网上搜索一些资料研究了一番，现在总结如下，以后好翻看。
对于行内元素、块状元素，定宽的元素、不定宽的元素，水平、垂直局中的设置都是不一样的。
水平局中
1、行内元素：
当子元素为行内元素，对父元素设置text-align:center;
2、定宽块状元素
当子元素为定宽块状元素，设置左右margin值为auto，如：margin:0 atuo;
3、不定宽块状元素
我们经常会遇到不定宽度块级元素的使用，如分页导航，因为分页的数目不定，所以不能用宽度限制住。此时对元素进行水平居中主要有三种方式：
- 加入 table 标签
- 设置 display;inline 方法
- 设置 position:relative 和 left:50%;
（1）加入 table 标签
第一步：为需要设置的居中的元素外面加入一个 table 标签 ( 包括 、、 )。
第二步：为这个 table 设置“左右 margin:auto”（这个和定宽块状元素的方法一样）。
HTML结构：
<div>
<table>
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
</div>css样式
<style>
table{
margin:0 auto;
}
ul{list-style:none;margin:0;padding:0;}
li{float:left;display:inline;margin-right:8px;}
</style>缺点：是增加了无语义的HTML标签，增加了嵌套深度
（2）设置 display：inline 方法
改变块级元素的 dispaly 为 inline 类型，然后使用 text-align:center 来实现居中效果。
HTML结构：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>css样式
<style>
.container{
text-align:center;
}
.container ul{
list-style:none;
margin:0;
padding:0;
display:inline;
}
.container li{
margin-right:8px;
display:inline;
}
</style>缺点：将块级元素的display设置为inline，于是少了很多功能，比如盒子模型
（3）设置 position:relative 和 left:50%;
通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。
HTML结构：
<body>
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
</body>css样式
<style>
.container{
float:left;
position:relative;
left:50%
}
.container ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>这种方法可以保留块状元素仍以 display:block 的形式显示，优点不添加无语议表标签，不增加嵌套深度。
缺点：设置了 position:relative，带来了一定的副作用。
4、通用方案
flex布局，对父元素设置display:flex;justify-content:center;
这四种方法各有利弊，根据实际情况选用。
垂直居中
1、父元素高度确定的单行文本
设置父元素的height等于行高line-height。注意：如果多行内联文本这样设置就会被切割成几部分，很难看，如下：
2、父元素高度确定的多行文本
3、父元素高度不确定的多行文本
以上有三种情况详解请看：https://segmentfault.com/a/1190000003111071
4、通用方案
flex布局，给父元素设置{display:flex; align-items:center;}。