#元素居中方式

预计阅读时间: 2 分钟

#水平居中

分为 行内元素居中 和 块级元素居中

1. 行内元素：在父级元素的样式设置 text-align:center;

2. 块级元素：

   1. 固定宽度：目标元素样式设置 margin:0 auto;

   2. 不定宽度：

      1. 设置 table：

         1.center{
         2      display:table;
         3      margin:0 auto;
         4  }

      2. 设置 inline-block：

         1<div class="container">
         2    <div class="item">1</div>
         3    <div class="item">2</div>
         4</div>
         5<style>
         6    .container{
         7        text-align:center;
         8    }
         9    .item{
         10        display:inline-block;
         11    }
         12</style>

      3. 设置 flex 布局：

         1<div class="container">
         2    <div class="item">1</div>
         3    <div class="item">2</div>
         4</div>
         5<style>
         6    .container{
         7        display:flex;
         8        justify-content:center;
         9    }
         10</style>

      4. 设置 left + transform：

         1<div class="container">
         2    <div class="item">我是目标元素</div>
         3</div>
         4<style>
         5    .container {
         6        position: relative;
         7        width: 500px;
         8        height: 300px;
         9    }
         10    
         11    .item {
         12        position: absolute;
         13        height: 100px;
         14        left: 50%;
         15        transform: translateX(-50%);
         16    }
         17</style

         如果目标元素有宽度还可以使用 margin-left: -(目标元素宽度)px 代替 transform，或者使用 margin: auto

#垂直居中

1. 行内元素：

   1. 单行：将父元素的行高设置成高度一样： line-height = height
   2. 多行：给父元素设置display: table-cell和vertical-align: middle

2. 块级元素：

   1. 设置 flex 布局

      1<div class="container">
      2    <div class="item">1</div>
      3    <div class="item">2</div>
      4</div>
      5<style>
      6    .container{
      7        display:flex;
      8       	align-items:center;
      9    }
      10</style>

   2. position + top / bottom

      1<div class="container">
      2    <div class="item">我是目标元素</div>
      3</div>
      4<style>
      5    .container {
      6        position: relative;
      7        width: 500px;
      8        height: 300px;
      9    }
      10    
      11    .item {
      12        position: absolute;
      13        height: 100px;
      14        line-height: 100px;
      15        bottom: 0;
      16        top: 0;
      17        margin: auto;
      18        transform: translateX(-50%);
      19    }
      20    .item {
      21        position: absolute;
      22        top: 50%;
      23        transform: translate(0, -50%);
      24        line-height: 100px;
      25    }
      26</style>

      transform中translate偏移的百分比就是相对于元素自身的尺寸而言的。

#水平垂直居中

1. 绝对定位 + margin

   1.container{
   2    position: absolute;
   3    left: 0;
   4    top: 0;
   5    bottom: 0;
   6    right: 0;
   7    margin: auto;
   8}

2. 绝对定位 + 负margin(需要知道 宽高)

   1.container{
   2    width: 200px;
   3    height: 200px;
   4    
   5    position: absolute;
   6    left: 50%;
   7    top: 50%;
   8    margin-left:-100px;
   9    margin-top:-100px;
   10}

3. 绝对定位 + transform

   1.container{
   2    width: 200px;
   3    height: 200px;
   4
   5    position:absolute;
   6    left:50%;
   7    top:50%;
   8    transform: translate(-50%,-50%); 
   9}

4. flex 布局

   1.container{
   2    height:600px;  
   3
   4    display:flex;
   5    justify-content:center;  
   6    align-items:center;
   7}

5. table-cell

   1.container{
   2    display:table-cell;
   3    text-align:center;
   4    vertical-align: middle;
   5}