CSS-水平居中，垂直居中，margin合并

文字垂直居中

不要写高度，用文字的高度和上下Padding的大小来组合成div的高度。
border是占据空间的，不想要占据空间，写outline

div {
  border:1px solid red;
  line-height: 24px;
  padding: 8px;
  text-align: center;
}

margin合并

• 内部元素的高度变高，外面包裹着它的父元素高度也变高。
• padding,border，line-height，height，border都属于内部元素的内部样式，可以改变父元素的高度。
• margin特殊情况：

1. 如果父元素没有border挡住margin，那么儿子元素的外边距的上下方向就会和父元素合并。
   解决办法：在父元素上添加border-top: 11px solid black; border-bottom: 11px solid black;或者使用padding-top:10px;或者使用overflow:hidden;最后一种不推荐使用。
2. 如果div里面还有div，那么这个div的高度就是由它里面的div的高度加上padding加margin决定。
3. 通过写一个字，也可以解决margin合并的问题。
4. 父元素的border会包裹住子元素的margin，但是不能包裹住自身的margin。

    text 1
    

      block 111
    
    text 2222
    

      block 2222
    
  

div里面的div如何垂直居中：

display: flex; justify-content: center; align-items: center;
在父元素里面添加padding ,在儿子里面添加margin:

.son {
  border: 5px solid red;
  width: 100px;
  padding: 10px;
  margin: 0 auto;
}
.dad {
  border: 3px solid green;
 
  padding: 10px 0;
}

要想在确定父元素高度的情况下垂直居中的方法：
情况：外面的高度是全屏的。以下方法不能做到子元素高度自适应。定宽定高

.son {
  border: 1px solid red;
  width: 100px;
  padding: 10px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
}
.dad {
  border: 3px solid green;
  height: 100vh;
  box-sizing: border-box;
}

不是定宽定高，用flex。IE不支持，全屏的模式对话框。

.son {
  border: 1px solid red;
  padding: 10px;
 
}
.dad {
  border: 3px solid green;
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}

按钮button的水平垂直居中

.box {
  border: 1px solid red;
  text-align: center;
 
}
.btn {
  padding: 3px;/*除了可以设置上下padding相等，还可以设置heihgt=line-height（单行效果，或者明确只有一行）*/
padidng: 10px 0;
  display: inline-block;/*不设置的话背景色会露出父元素的边框，因为a连接是行内元素，设置padding对背景色有效，对文字无效。*/
  background: green;
  color: #fff;
  border-radius: 3px;
  text-decoration: none;
}

height = line-height只对行内元素有效。

块级元素水平居中：

.box2 {
  border: 10px solid black;
  width: 300px;
  margin: 0 auto;
  text-align: center;
}

整个页面的居中

.layout {
  width: 600px;
  margin: 10px auto;
}

总代码示例：

垂直水平绝对居中：父容器宽高不确定。

• 方法一：实现全屏。

body {
  margin: 0;
}
body,html {
  height: 100%;
}
.box3 {
  height: 100%;
  background-color: rgba(0,0,0,0.4);
  padding: 1px;
}
.box4 {
  width: 600px;
  height: 400px;  
  background: #fff;
  text-align: center;
}

1. 因为height是继承上一级的属性值，所以想要全屏，必须全部设置成100%。
2. 这种全屏方式适合于下面还有全屏，滚动全屏。
   代码示例：

• 第二种全屏方式：

 position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;

绝对定位实现居中

子元素的宽高确定。

body {
  margin: 0;
}
.box3 {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: pink;
  /*display: flex;
  justify-content: center;
  align-items: center;*/
}
.box4 {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-top: -100px;
  margin-left: -150px;
  width: 300px;
  height: 200px;
  background: #fff;
  border: 1px solid #ccc;
  text-align: center;
}

代码示例：

• 子元素的宽高不定，子元素的宽高根据内容来确定。

.box4 {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate (-50%,-50%);
  background: #fff;
  border: 1px solid red;
  text-align: center;
}

vertical-align实现居中

• 前提：作用在行内元素和表格，才生效。

.box {
  width: 300px;
  height: 200px;
  border: 1px solid red;
  text-align: center;
}
.box:before {
  content:'';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}
.box img {
  vertical-align: middle;
}

    
  

代码示例：

使用table-cell实现居中

.box{
  width: 300px;
  height: 200px;
  border: 1px solid ;
  display: table-cell;/*只需在父容器上添加这一句话*/
  vertical-align: middle;
  text-align: center;
}