CSS中实现div元素水平垂直居中

常用7种实现水平垂直居中方法：

1、行内元素水平垂直居中

2、绝对定位 + margin

3、绝对定位+margin:auto

4、绝对定位 + translate

5、flex 布局

6、flex+margin:auto

7、table-cell

方法	实现代码	注意事项	案例
行内元素水平垂直居中	line-height:35px;text-align:center;	line-height属性只针对文字垂直居中有效	案例1
绝对定位 + margin	给子元素加如下代码position:absolute;top:50%;margin-top:-元素自身高度一半left:50%;margin-left:- 元素自身宽度一半	需要指定子元素的宽高	案例2
绝对定位+margin:auto	给子元素加上如下代码：position:absolute;margin:auto;	需要给子元素指定宽高如果不指定宽高，子元素将占满父容器	案例2
绝对定位 + translate	给子元素加上如下代码：position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)	无需指定子元素的宽高，推荐因为 translate() 函数中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的（动态计算宽高）	案例3
flex 布局	给父元素加上如上代码display:flex;justify-content: centeralign-items: center	父元素中所有子元素都水平垂直居中显示	案例4
flex+margin:auto	给父元素加下如下代码display:flex;给需要水平和垂直居中的子元素加上margin:auto;	指定某一个子元素水平和垂直居中	案例4
table-cell	给父元素加上如下代码 display: table-cell; text-align: center;vertical-align: middle;	display: table-cell属性也会被float, position: absolute等 属性破坏效果，应避免同时使用同时margin值是没有任何意义的	案例5

1、行内元素水平垂直居中

方法一：文字水平垂直居中，父元素加上如下代码：

• line-height:高度大小值;    //垂直居中

• text-align:center;    //水平居中

这里要特别注意，这种方式并不能让图片相对文字在单行中垂直居中

方法二：图片相对文字在单行中垂直居中，在方 法一基础上加上如下代码

• vertical-align: middle;     //图片与文字垂直居中，但会有少量偏差，再通过

• position:relative;  //通过相对定位微调元素位置

• top:2px;    //微调位置大小

2、绝对定位 + margin（需要指定子元素的宽高）

方法一：给子元素加如下代码

• position:absolute;

• top:50%;  

• margin-top:-自身高度一半 ;  

• left:50%;  

• margin-left:- 自身宽度一半  ;

不足之处：要求指定子元素的宽高，才能写出 margin-top 和 margin-left 的属性值。

方法二： 给子元素加上如下代码

• position:absolute;

• margin:auto;

不足之处：要求指定子元素的宽高，如果不指定宽高，子元素将占满父容器

如果元素的宽高会随着内容发生变化，则以上两种方法都不能用，否则ok

3、绝对定位 + translate（无需指定子元素的宽高，推荐）

这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。因为 translate() 中使用百分比值时，是以这个元素自身的宽度和高度为基准进行换算和移动的（动态计算宽高）。

给子元素加下如下代码

• position:absolute;       top:50%;       left:50%;

• transform: translate(-50%,-50%);   向左和向上移动自身宽度一半

4、flex 布局

方法一：给父元素加上如上代码

• display:flex; //弹性布局

• justify-content:center; //子元素相对父元素水平（主轴）居中

• align-items:center; //子元素相对父元素垂直（交叉轴）居中

不足之处：父容器里的所有子元素们都垂直居中了。（如果父容器里有多个子元素的话，我们只想指定某个子元素居中，则可以用方法二。

方法二：给父元素和子元素分别加上如下代码

• display:flex; //给父元素加，弹性布局

• margin:auto; //给子元素加

5、table-cell 布局

display: table-cell;指让标签元素以表格单元格的形式呈现，使元素类似于td标签。

不过会被float, position: absolute等属性破坏效果，应避免同时使用。

同时margin值是没有任何意义的

应用一：内容整体水平垂直居中

给父元素加上如下代码	如果子项是块级元素，则需要转成行内块级元素
display: table-cell;vertical-align: middle;text-align:center;	display:inline-block;

应用二：不等高项水平垂直居中

在应用一的基础上，给子项（元素） 添加 vertical-align: middle; 就可以实现

应用三：单个块级元素水平垂直居中

给父元素加上如下代码	子项为块级元素加上如下代码
display: table-cell;vertical-align: middle;	margin: 0 auto