CSS水平垂直居中方法总结

部分HTML代码如下：

<div class="wrap block"> ??????<div class="block-center">块儿居中</div> ?</div> ??????????<div class="wrap inline"> ?????<span class="inline-center">内联居中</span> ?</div> 

一、absolute

• 拔河效应（元素宽高需设定）

  .block{ ?????position: relative; ?} ???.block-center{ ?????position: absolute; ?????margin: auto; /*这句要写，否则无效果*/ ?????left: 0; ?????top: 0; ?????right: 0; ?????bottom: 0; ?} 

• 利用margin（元素宽高需设定）

  .block{ ???position: relative;}.block-center{ ?????position: absolute; ?????top: 50%; ?????margin-top: -10px; /*元素高度一半*/ ???left: 50%; ?????margin-left: -50px; /*元素宽度一半*/} 

• 利用CSS3 translate

  .block{ ???position: relative;}.block-center{ ?????position: absolute; ?????top: 50%; ?????left: 50%; ?????transform: translate(-50%,-50%); ?}

二、table

• table-cell

1. inline 元素

   <div class="table-cell"> ???<span>我是文字</span></div>

   .table-cell{ /*注意：table-cell不感知margin, 在父元素上设置table-row等属性，也会使其不感知height*/ ???display: table-cell; ???vertical-align: middle; ???text-align: center;}

2. block 元素

   <div class="table-cell"> ???<div class="block">我是块元素</div></div>

   .table-cell{ ???display: table-cell; ???vertical-align: middle; ???text-align: center;}.table-cell .block{ ???display: block; ???height: 20px; ???width: 20px; ???margin-left: calc(50% - 10px); /*calc()函数内部的 - 和 + 运算符两侧各加一个空白符，否则会产生解析错误*/}

三、块元素自带方法

• 利用 line-height（子元素是linline / inline-block）

  .inline{ ???text-align: center; ???height: 80px; ???line-height: 80px; /*行高等于元素高度，line-height不可设置为100%，其百分比值是相对于父元素字体大小计算的*/}

• 利用 CSS calc() 函数（子元素是 block）

  .block{ ???width: 200px; ???height: 200px;}.block-center{ ???width: 50px; ???height: 50px; ???margin: calc(50% - 25px); /*由于margin的百分比值是相对于父元素的宽高进行计算的，故此方法只适用于宽高相等的父容器*/}

四、flex

1.  块元素和浮动元素

   .block{ ?????display: flex; ?????min-height: 50vh; ?} ?.block-center{ ?????margin: auto; ?} ?

2.  行内元素（给外层父元素添加即可）

   .inline{ ?????display: flex; ?????min-height: 50vh; ?????align-items: center; ?????justify-content: center; ?}

五、grid

<div class="wrap grid"> ???<div class="block">grid</div></div>

.grid{ ???display: grid; ???width: 200px; ???height: 150px;}.grid .block{ ???width: 50px; ???height: 50px; ???align-self: center; ???justify-self: center;}

对于 grid 的介绍和学习，推荐一篇blog：grid栅格布局

相关推荐：

• 水平垂直居中，这是一道面试必考题
• 盘点8种CSS实现的垂直水平居中

本篇博客基于几种常用的垂直居中方法进行了总结，不全的地方欢迎大家评论补充。