前言：

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

元素/居中方式 子元素主动居中 父元素控制子元素居中
水平居中 行内：【见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;}