css居中方式大全

前言：

以下布局方案所指的父元素都是块级元素、子元素不固定情况下对子元素进行居中的方式，可以对照表格中的见指定的下方代码进行使用，结尾附代码，直接可以运行，如有错误，不吝赐教：

元素/居中方式	子元素主动居中	父元素控制子元素居中
水平居中	行内：【见1】；块级：【见2】	行内：【见3】；块级：【见4】
垂直居中	行内：【见5】；块级：【见6】	行内：【见7】；块级：【见8】

• 1
  • 转换为块级元素：display:inline-block/block
  • 通过父元素控制行内元素的居中：【见3】
• 2
  • 定宽：position:relative; left:50%; margin-left:[width/2]
  • margin: 0 auto;
  • 定宽：position:absolute; left 50%; translateX:50%;
• 3
  • text-aligin:center
  • Flex 布局
• 4
  • Flex布局
• 5
  • 转换为块级元素
  • 通过父元素控制行内元素居中：【见7】
• 6
  • 定宽定高 position:absolute; translateY:50%
  • 定高：position:relative; top:50%; margin-top:[height/2];
• 7
  • 定高： height = line-height
  • 转换为表格元素：display:table-cell; vertical-align:middle;
  • 使用精灵元素：display:inline-block; content:''; height:100%; vertical-align:middle
  • Flex布局
• 8
  • Flex布局

Flex布局居中方案

display: flex/inline-flex;
flex-direction: row;
justify-content: center;
align-items: center;

方案总结

每种居中都有自己的优缺点，在使用时，可以根据CSS属性兼容性、代码可行性、页面分辨率进行选择；个人推荐Flex布局来进行居中。

demo代码附录

HTML:
  <!-- 子元素主动居中 -->
    <!-- 行内 -->
  <div class="parent">
    <span class="child inline-center-child">子元素-行内</span>
  </div>
    <!-- 块级 -->
  <div class="parent">
    <div class="child block-center-child">子元素-块级</div>
  </div>
  <!-- 父元素主动居中 -->
    <!-- 行内 -->
  <div class="parent inline-center-parent">
    <span class="child">父元素-行内</span>
  </div>
    <!-- 块级 -->
  <div class="parent block-center-parent">
    <div class="child">父元素-块级</div>
  </div>

CSS样式初始化
  *{
    margin: 0;
    padding: 0;
  }
  /*元素初始化*/
  .parent{
    display: inline-block;
    background: #eeb8c3;
    width: 200px;
    height: 200px;
    margin-right: 10px; 
  }
  .child{
    background: #ee4866;
    width: 70px;
    height: 70px;
  }

CSS居中核心代码：
  /*居中代码*/

  .inline-center-child{
  }


  .block-center-child{
    /* case1 */
    margin: 0 auto;
    
    /* case2 */
    position: relative;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* case3 */
    position: relative;
    top: 50%;
    margin-top: -50px;
  }

  .inline-center-parent{
    /* case1 */
    text-align: center;

    /* case2 */
    display: table-cell;
    vertical-align: middle;

    /* case3 */
    line-height: 200px;
  }
  /* case4 */
  .inline-center-parent::before{
    display: inline-block;
    content: '';
    height: 100%;
    vertical-align: middle;
  }
  .block-center-parent{
  }
  /* 万能-flex布局 */
  .parent{
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }