p标签的水平居中和垂直居中

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

行内元素和行内块元素水平居中，给其父元素添加text-align:center；所以案例里面给one加了 text-align: center之后span就会水平居中了。在设置span行高和高都是一样的 20px;这样就实现上下居中了。

2块级元素P元素水平居中垂直居中

给其父元素添加text-align:center使其水平居中，这个只是对行内元素和行内块元素有效。而P元素是块级元素，所以不能使用上面的方法。可以用定位来做。p设置 position: absolute;再给他父元素two加  position: relative;然后开始计算上面距离的数值和左边距离的数值，这里分别是

 top: 15px;left: 50px;然后就实现上下水平居中了。

3.块级元素h3元素水平居中垂直居中

使用 display: flex;使父级元素变成弹性盒子，然后再通过  margin: auto;来设置水平垂直居中。

它之所以被称为 Flexbox（弹性盒子） ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。

关于 Flexbox（弹性盒子）可以看看这里的详细讲解

https://www.cnblogs.com/hellocd/p/10443237.html

4.块级元素P元素水平居中垂直居中

 当给p元素设置margin: 15px auto;的时候，会发现p元素的外边距和它的父元素外边距重合，看着是外边距塌陷问题。给父元素添加overflow: hidden;之后，就正常了。

给父元素或者子元素设置text-align:center,display:flex,子元素设置:position:absolute

实例:

父元素:

.cancel-div {

height: 28%;

text-align: center;

justify-content: center;

display: flex;

align-items: center;

border-top: solid 1px #F7F7F7;

color: #333;

}

子元素:

.cancel-div p {

bottom: 0.2rem;

position: absolute;

font-size: 0.45rem;

}