CSS常用居中方式

1. 让普通元素居中：

若子元素为块元素，给父元素加上： margin: 0 auto; 。 margin-top 值为：(父元素内容区高度 －子元素盒子总高) / 2。

若子元素为行内元素、行内块元素，给父元素加上： text-align: center 。让父元素的height = line-height ，每个子元素都加上： verticalalign: middle; 。
补充：若想绝对垂直居中，父元素font-size 设置为0 。

2. 让定位元素在包含块中居中

什么是包含块？

1. 对于没有脱离文档流的元素：包含块就是父元素；
2. 对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都
   没定位，那包含块就是整个页面）。

方案一：

<div class="outer">
	<div class="inner">春风得意马蹄疾,不信人间有别离。</div>
</div>

.outer {
  width: 400px;
  height: 400px;
  background-color: #888;
  position: relative;
}

.inner {
  width: 130px;
  height: 100px;
  background-color: orange;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
}

方案二：

<div class="outer">
    <div class="inner">春风得意马蹄疾，一日看尽长安花。</div>
</div>

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    position: relative;
}

.inner {
    width: 130px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

 

注意：方案二 定位的元素必须设置宽高！！！ 

3.利用flex布局居中

伸缩项目：伸缩容器所有子元素自动成为了 伸缩项目。

1. 仅伸缩容器的子元素成为了伸缩项目，孙子元素、重孙子元素等后代，不是伸缩项
   目。
2. 无论原来是哪种元素（块、行内块、行内），一旦成为了伸缩项目，全都会“块状化”。

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

<div class="outer">
    <div class="inner">你好呀！</div>
</div>

.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 

<div class="outer">
    <div class="inner">你好呀！</div>
</div>

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    margin: auto;
}