一、元素的布局特性

块级元素：

独占一行（width默认为100%，height为0）；
可以设置任何尺寸相关的属性（width、padding、margin和border）

行内元素：
1、内容不独占一行。width height不可设置，可置换行内元素（img\input\textarea\select）则可以；
2、竖直方向margin和padding不可设置，水平方向可设置。
3、有多个行内元素，则会排列在一行，直到父容器放不下才会换行。

在水平和垂直方向上的对齐方式，行内级元素分别受父元素的**text-align**属性和自身**vertical-align**属性的控制

在水平方向上默认左对齐，在垂直方向上默认在行框的baseline基线上显示 vertical-align=baseline

行内块级元素：

排列方式与行内级元素同，不独占一行，在一行内按从左到右的顺序排列；
水平和垂直方向上的对齐方式与行内级元素同；
和块级元素一样，可以设置任何尺寸属性（但width默认为0）；

二、水平居中

1. 行内元素

让一个父元素为块级元素的行内元素水平居中，如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置text-align:center来实现的

// 父元素是块级元素
<div id="parent">
    <span id="child">我是行内元素</span>
</div>
#parent {
  height: 300px;
  width: 300px;
  text-align: center;
  background: skyblue;
}

2. 块级元素margin

只需给需要居中的块级元素margin: 0 auto，其必须有width属性

<div id="parent">
    <div id="child">我是行内元素</div>
</div>
#parent {
  height: 300px;
  width: 400px;
  background:  #fcc;
}
#child {
  height: 100px;
  width: 100px; 
  background: #f66;
  margin: 0 auto;
}

3. 绝对定位+ 负margin

position:absolute;
width:固定;
left:50%;
margin-left:-0.5宽度;

4. 绝对定位+ transform

position:absolute;
left:50%;
transform:translate(-50%,0);

5. flex

三、垂直居中

1. 单行文本垂直居中

很常用，主要用于文字的排版，也可以用于图片元素居中

行高：内容高度 + 下距离 + 上距离，文本内容在每一行中都是居中的，利用这个原理可以实现文本垂直居中。

line-height: 100px;
height: 100px; // 有line-height 设置后没必要再设置height

若元素是单行文本, 则可设置 line-height 等于父元素高度

都可以参考水平垂直居中的方法

2. 绝对定位+ 负margin

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
}

3. 绝对定位+ transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

4.绝对定位+margin

.child{
    position:absolute;
    height:固定;
    top:0;
    bottom:0;
    margin:auto 0;
}

5. flex布局

.parent {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

水平垂直居中

1.绝对定位+负margin

.parent {
  position: relative;
}
.child {
  width:200px;
  height: 200px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left:-100px;
  margin-top:-100px;
}

2. 绝对定位+margin:auto

   div{
        width: 200px;
        height: 200px;
        background: green;
        position:absolute;
        left:0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }

3.绝对定位+transform

.parent {
  position: relative;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

4. flex

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

四、总结

行内元素、行内块元素、块元素，居中显示不管是垂直还是水平的时候：

绝对定位+负margin（需要知道尺寸）
绝对定位+margin:auto
绝对定位 + transform
flex

行内块元素

水平方向受 text-align 控制
垂直方向受 vertical-align 控制

居中显示

一、 元素的布局特性