超详细CSS中各类元素水平竖直居中的方法及常遇到的问题

对于很多初学者来说，在做静态页面的练习时，大多会遇到图片或者div元素居中失败的问题，本篇文章将针对此现象进行一个详细解答。

首先，清楚需要居中的对象的元素类型：

图片<img>是一个内联块元素，而像div、p这些是块级元素。这里也就引出了第一个常见的问题：

很多初学的小伙伴在实现图片的水平居中时，常常使用了margin:auto;结果图片没有实现居中，自己还不清楚原因。那首先，我们要清楚margin:auto;仅针对块级元素有效！它可以使块级元素在其父元素中水平居中。那内联块和内联元素实现水平居中的方法是什么呢？

内联块和内联元素实现水平居中：需要在其外层的父元素中添加text-align：center；语句

块级元素实现水平居中：需要给该元素添加margin:auto;语句

那大家会发现，刚刚我们说到的也仅涵盖了水平居中的方法，接下来我们就来说说如何实现水平和竖直居中： 

这个时候我们就需要引出定位属性position了：

方法一：

1，对元素设置定位属性：position：absolute; (这时候有一个常见的困惑，我们发现对于块级元素，给其添加position：absolute;后，设置margin：auto；又无法实现水平居中了，这是因为添加绝对定位后，该元素脱离文档流了！！！）

2,元素设置top：50%；这时元素的顶部，会移动到距离标记定位元素的父元素顶部的50%（如果没有定位元素标记的父元素，则参考物变为浏览器窗口）

 3,元素设置margin-top:当前元素高的一半：向上拉取当前元素高度的一半;

 

 以上举例的是竖直方向，水平方向思想一致。

方法二： 

1. 元素设置position:absolute;
2. 元素设置left:0;top:0;right:0;bottom:0;四个方向拉扯
3. 让其居中margin:auto;

方法三 ：借助transform：translate；

 1.元素设置position:absolute;
 2.元素设置top:50%;left:50%;移动到参考物中心的点的右下侧
 3.向左和向上拉取当前元素宽高的一半 transform:translate(-50%,-50%);这里的百分数参考元素本身

优点：外层和里层的大小更改之后，不用再更改数值，就可以实现水平垂直居中

这里针对vertical-align再说明一下：很多小伙伴尝试用vertical-align；实现内联块元素的垂直对齐。但其实vertical-align指的是行内元素的基线相对于该元素所在行的基线的垂直对齐