css基础：各种居中方式

把居中全实现了一遍，不怕忘记

水平居中

1. 行内元素, 父级是块级, 设置 text-align: center;

<div class="container">
  <span>Center</span>
</div>
<style>
  .container {
    text-align: center;
  }
</style>

2. 块级元素, 宽度确定, margin: 0 auto;

<div class="container">
  <div class="block">Center</div>
</div>
<style>
  .block {
    width: 300px;
    margin: 0 auto;
  }
</style>

3. 块级元素, 宽度不确定, display: inline-block 或 display: inline 其转换成行内块级, 再套用 1
4. 块级元素, 使用 绝对定位 position:absolute, left:50%, 然后 margin-left: -宽度的一半 px; 或者 transform: translateX(-50%)

<div class="container">
  <div class="block">Center</div>
</div>
<style>
  .container {
    position: relative;
  }
  .block {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
</style>

5. flex 布局, 父元素添加属性 display: flex; justify-content: center;

<div class="container">
  <div class="block">Center</div>
</div>
<style>
  .container {
    display: flex;
    justify-content: center;
  }
</style>

6. Grid auto xxxpx auto

垂直居中

1. 行高等于盒子的高, line-height === height

<div class="container">
  <span class="block">Center</span>
</div>
<style>
  .container {
    height: 300px;
  }
  .block {
    line-height: 300px;
  }
</style>

2. 块级元素, 使用 绝对定位 position:absolute, top:50%, 然后 margin-top: -宽度的一半 px; 或者 transform: translateY(-50%)
3. flex 布局, 父元素添加属性 display: flex; align-items: center;

<div class="container">
  <div class="block">Center</div>
</div>
<style>
  .container {
    display: flex;
    align-items: center;
  }
</style>

水平垂直居中

1. 子元素宽高固定，父元素为非 static，给子元素设置绝对定位，top: 0; right: 0; bottom: 0; left: 0; margin: auto;

<div class="container">
  <div class="block">Center</div>
</div>
<style>
  .container {
    height: 300px;
    position: relative;
  }
  .block {
    position: absolute;
    top: 0;
    right: 0;
    height: 20px;
    width: 20px;
    bottom: 0;
    left: 0;
    margin: auto;
  }
</style>

2. 绝对定位，left: 50%; top: 50%; margin-left: –元素宽度的一半 px; margin-top: –元素高度的一半 px;
3. flex 布局, 父元素添加属性 display: flex; justify-content: center;align-items: center;

双飞翼

左右固定, 中间自适应

1. 浮动

<div class="container">
  <div class="left">11</div>
  <div class="right">22</div>
  <div class="middle">33</div>
</div>
<style>
  .container {
    width: 100%;
    height: 500px;
  }
  .left {
    width: 300px;
    float: left;
    height: 100%;
    background-color: purple;
  }
  .right {
    height: 100%;
    width: 300px;
    float: right;
    background-color: red;
  }
  .middle {
    height: 100%;
    margin: 0 300px;
    background-color: gold;
  }
</style>

2. 绝对定位, main left 和 right 等值

<div class="container">
  <div class="left">11</div>
  <div class="right">22</div>
  <div class="middle">33</div>
</div>
<style>
  .container {
    width: 100%;
    height: 500px;
    position: relative;
  }
  .left {
    width: 300px;
    position: absolute;
    left: 0;
    height: 100%;
    background-color: purple;
  }
  .right {
    height: 100%;
    position: absolute;
    right: 0;
    width: 300px;
    background-color: red;
  }
  .middle {
    height: 100%;
    position: absolute;
    left: 300px;
    right: 300px;
    background-color: gold;
  }
</style>

3. flex

<div class="container">
  <div class="left">flex</div>
  <div class="middle">flex</div>
  <div class="right">flex</div>
</div>
<style>
  .container {
    width: 100%;
    height: 500px;
    display: flex;
  }
  .left {
    width: 300px;
    height: 100%;
    flex-shrink: 0;
    background-color: lightcoral;
  }
  .right {
    height: 100%;
    width: 300px;
    flex-shrink: 0;
    background-color: hotpink;
  }
  .middle {
    width: 100%;
    // or flex-grow: 1;
    background-color: greenyellow;
  }
</style>

4. table。 还别说，邮件客户端浏览器比较垃圾，经常会用到！

<div class="container">
  <div class="left is-inline-block">table</div>
  <div class="middle is-inline-block">table</div>
  <div class="right is-inline-block">table</div>
</div>
<style>
  .container {
    width: 100%;
    height: 500px;
    display: table;
  }
  .is-inline-block {
    display: table-cell;
  }
  .left {
    width: 300px;
    height: 100%;
    background-color: rosybrown;
  }
  .right {
    width: 300px;
    height: 100%;
    background-color: teal;
  }
  .middle {
    background-color: indianred;
    height: 100%;
  }
</style>

5. calc()+inline-block

<div class="container">
  <div class="left is-inline-block">grid</div>
  <div class="middle is-inline-block">grid</div>
  <div class="right is-inline-block">grid</div>
</div>
<style>
  .container {
    width: 100%;
    height: 500px;
    /* 行内元素空白字符间距问题 */
    font-size: 0;
  }
  .is-inline-block {
    display: inline-block;
  }
  .left {
    width: 300px;
    height: 100%;
    background-color: rosybrown;
  }
  .right {
    width: 300px;
    height: 100%;
    background-color: teal;
  }
  .middle {
    width: calc(100% - 300px - 300px);
    background-color: indianred;
    height: 100%;
  }
</style>

6. grid

<div class="container">
  <div class="left">grid</div>
  <div class="middle">grid</div>
  <div class="right">grid</div>
</div>
<style>
  .container {
    width: 100%;
    height: 500px;
    display: grid;
    grid-template-columns: 300px auto 300px;
    grid-template-rows: 500px;
  }
  .left {
    width: 100%;
    background-color: yellowgreen;
  }
  .right {
    width: 100%;
    background-color: teal;
  }
  .middle {
    width: 100%;
    background-color: indianred;
  }
</style>