外边距合并问题和块级元素水平垂直居中的方法

外边距合并问题和块级元素水平垂直居中的方法
外边距合并问题：
水平方向没有外边距合并问题
只是垂直方向上有
父子级：
1.给父元素添加一个overflow：hidden;
2.给父元素加border
3.给父元素设置IE盒子，给父元素加上padding-top
4.给父元素或者子元素，加上float浮动
5.给父元素或者子元素，加上position：absolute
6.给父元素或者子元素，加上position：fixed 一般不推荐
7.给父元素或者子元素，加上display：inline-block
兄弟级：
1.若两个外边距都为正数，那么会合并，不会叠加。
取值较大的那个。
2.若两个外边距都为负数，那么会合并，不会叠加。
取值绝对值较大的。
3.若两个外边距一个为正数，一个为负数，那么会叠加，不会合并。

块级元素水平垂直居中：
行内元素 水平垂直居中 text-align：center；
line-height：和父元素同高。
块级元素 水平垂直居中
1.给父元素设置相对定位relative 给子元素设置绝对定位absolute
并且left right top bottom都设置为0
设置margin:auto;
2.给父元素设置绝对定位 给子元素设置绝对定位 absolute
并且把left设置为子元素宽度的一半 top设置为子元素高度的一半
3.给父元素设置绝对定位 给子元素设置绝对定位
并且把left设置为父元素宽度的一半 减去子元素宽度的一半
top设置为父元素高度的一半 减去子元素高度的一半
left: calc(50% - 100px);
top: calc(50% - 100px);
3.给父元素设置绝对定位 给子元素设置绝对定位
并且把left设置为父元素宽度的一半 50%
top设置为父元素高度的一半 50%
margin-top:负的子元素的高度的一半
margin-left:负的子元素的宽度的一半
position: absolute;
left: 50%;
top: 50%;
margin-left: -100px;
margin-top: -100px;