CSS--内容居中

1.1文本水平对齐

text-align: center;

1.2文本居中对齐

对于单行文字：让height 等于line-height ，可以实现文字垂直居中。

vertical-align 作用：用于指定同一行元素之间，或 表格单元格 内文字的
垂直对齐方式。

如何让子元素，在父亲中 水平居中：

• 若子元素为块元素，给父元素加上： margin:0 auto; 。
• 若子元素为块元素，display: inline-block;转换为行内元素，再给父元素加上： text-align:center
• 若子元素为行内元素、行内块元素，给父元素加上： text-align:center 。

如何让子元素，在父亲中 垂直居中：

• 若子元素为块元素，给子元素加上： margin-top ，值为：(父元素content －子元素盒子总高) / 2。

• 若子元素为行内元素、行内块元素：

  让父元素的height = line-height ，每个子元素都加上： vertical-align:middle; 。

• 补充：若想绝对垂直居中，父元素font-size 设置为0 。

让定位元素的宽充满包含块：

1. 块宽想与包含块一致，可以给定位元素同时设置 left 和 right 为0 。
2. 高度想与包含块一致， top 和 bottom 设置为 0 。

让定位元素在包含块中居中：

• 方案一：

  left:0;
  right:0;
  top:0;
  bottom:0;
  margin:auto;

• 方案二：

  left: 50%;
  top: 50%;
  margin-left: 负的宽度一半;
  margin-top: 负的高度一半;

注意：该定位的元素必须设置宽高！！！

位移配合定位，可实现元素水平垂直居中

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

flex 实现水平垂直居中

方法一：父容器开启flex 布局，随后使用justify-content 和align-items 实现水平垂直居中

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
    justify-content: center;
    align-items: center;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
}

方法二：父容器开启flex 布局，随后子元素margin: auto

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
}

.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: auto;
}