关于CSS实现水平垂直居中的一些方法-（小白必看、简单易懂^_^）

css实现水平垂直居中有很多种方法，首先要考虑的是对于父元素居中，还是浏览器居中 还有就是已知元素宽高的实现方法和未知元素宽高的实现方法。
先说说关于已知元素宽高对于父级实现水平垂直居中的方法吧。
首先先是html结构是这种父级包含子级的这种。假设已经知道父元素宽高为500px-500px，子元素宽高为300px-300px。然后我们来看看实现子元素对于父元素垂直居中的一些方法：

方法一、
给子元素添加margin,让子元素自己挤到中间去，我们想的是父元素宽度是500px,子元素是300px,500px-300px是200px，首先想到先让元素水平居中，所以我们左右正好是各100px的外间距

给div{width: 500px;height: 500px;background: #000;}设置个背景色这样容易看清楚，给p{width: 300px;height: 300px;background: darkred;margin-left: 100px;margin-right:100px;}同样设置个深红色背景色这样容易看清楚。我们先来看一下效果：

我们看到确实是如我们想到的那样，水平居中了父元素，同理我们想要垂直方向也居中，上下也加上外间距100px。margin-top:100px;maigin-bottom:100px;这里我就直接写为maigin:100px;

我们来看一下效果：

好像并没有实现垂直方向的居中，这是因为maigin-top:100px;的间距给到了父元素上面。所有没有实现，我们解决方法是给父级元素一个属性overflow: hidden;

我们来看一下效果

果然这样就解决了子元素的maigin-top值会给到父元素的bug。实现了水平和垂直方向的居中。

方法二、
我们前面想到了给子元素用外边距maigin,同样我们也可以给父元素用内边距padding;同理：
注意：这里用的是padding就不需要解决maigin-top值会给到父元素的bug

这里父级div由于给了内边距padding,盒子模型的原理内边距会占据宽高，所以div的宽高要减去左右padding值各100px,500px-100px-100px;div的宽高就变成了300px;
如果这里不想做宽度的减法，我们可以把标准盒子模型变成怪异盒子模型。给父元素div加box-sizing: border-box;

看效果：同样可以实现

方法三、
我们还可以用元素类型的知识点来实现子元素对于父元素的水平垂直方向的居中：给父级添加text-align:center;子元素添加vertical-align: middle;display: inline-block;因子元素p是会计元素，所以要转成行内块元素，子元素的vertical-align: middle;才会生效。父元素的text-align:center;也才可以实现子元素的水平方向的居中。注意的是父元素还需要加一个属性：line-height: 500px;行高要等于父元素的高度；

我们看到这样也可以实现了，注意的是子元素p的line-height: 300px;只是为了让p中的文字垂直居中

方法四、
同方法三，用元素类型加上我们还可以找一个中介span来实现。
html结构：

css:

这里我们没有给父级行高line-height: 500px; 而是由中介span高度100%;来实现的；
注意：现实工作项目中如果需要这样结构写来实现水平垂直居中，中介span里面不要放内容，不然会撑开宽度。

方法五、
最后来说一下用定位实现水平垂直居中的方法。
如果是一个子元素相对于父元素水平垂直居中 子元素只能用绝对定位absolute 父元素给相对定位relative
1、

因为父元素是500500，子元素300300的 为了让左右间距各100 所以给子元素top:100px;left:100px;（同方法一计算左右间距一样，每个元素宽高不同所以计算的间距也不一样，要根据现实项目宽高计算）就可以实现子元素相对于父元素水平垂直居中
看效果

2、

top:50%;left:50%;是想实现子元素在父元素中间的位置，但是子元素宽高是300px;只这样写会让子元素偏右下，想让子元素向左上位置走，所以要减去子元素一半的值，就要用到margin-top: -150px;和 margin-left: -150px;
看效果 也可以实现

3、

用margin:auto;left: 0; top: 0; bottom: 0; right: 0;也是可以实现水平垂直居中
同样：

以上就是关于已知元素宽高对于父级实现水平垂直居中的方法

同理我们还可以知道了已知元素宽高对于浏览器实现水平垂直居中的方法
现在目前我知道的只能用定位 （小伙伴有其他方法，欢迎一起讨论纠正~~）
定位用绝对定位或者固定定位都行，如果需求是相对于窗口水平垂直居中的且不动，那么就只能是固定定位
HTML结构：

1、
2、
看效果:

除了上面的，我们还可以知道了已知父级元素宽高未知子元素元素宽高对于父级实现水平垂直居中的方法

方法一、
HTML结构

css:

transform: translate(-50%,-50%); 这里的-50%是自己的一半
效果：

方法二、
弹性盒子实现1

弹性盒子方法2

效果也是可以实现

总结：
无论什么条件或者相对于什么水平垂直居中；
定位+transform：translate；
display: flex;+margin: auto;
display: flex; justify-content: center; align-items: center;
（如果小伙伴有什么其他方法，欢迎大家一起讨论纠正~~）