css水平与竖直居中实现

居中问题分为水平居中和竖直居中两种；而根据所居中元素的不同，有行内元素居中和块级元素居中两种居中问题。

1、水平居中——行内元素

text-align: center;

2、水平居中——定宽块状元素

margin: auto，满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。

3、水平居中——不定宽块状元素

（1）加入 table 标签：利用table标签的长度自适应性—即不定义其长度也不默认父元素body的长度（table其长度根据其内文本长度决定），因此可以看做一个定宽度块元素，然后再利用定宽度块状居中的margin的方法设置table样式，使其水平居中。

（2）设置 display: inline 方法：改变块级元素的 display 为 inline 类型（设置为 行内元素 显示），然后使用 text-align:center 来实现居中效果。

（3）设置 position:relative 和 left:50%：通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。

4、利用水平对齐和行高

设置text-align 和 line-height 实现单行文本水平垂直居中。

p {
  text-align: center;
  line-height: 200px;
}

5、通过verticle-align:middle实现CSS垂直居中

vertical生效的前提是元素的display：inline-block。

6、通过line-height实现CSS垂直居中

设置子元素的line-height值等于父元素的height，这种方法适用于子元素为单行文本的情况。

.div{
  width:200px;
  height:150px;
  border:1px solid #000;
  line-height:150px;
  text-align:center;
}