CSS如何居中元素

How to center in CSS

一步步拆解你的需求，是水平居中还是垂直居中？还是水平垂直居中？父容器是inline还是block，高度知不知，宽度造不造？一个子元素还是多个子元素？一行还是多行？文字？图片？

理论知识

属性：text-align

用法：text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align并不控制块级元素自己的对齐，只控制它的行内内容的对齐→→（demo展示text-align对行内元素与块元素的区别）

除了默认的行内元素（没有标签包围的文本默认是匿名行内元素）外，我们可以通过设置元素的display:inline、 inline-block、 inline-table、 inline-flex等一切inline 或 inline-*elements值。

属性：verical-align

用法：CSS 的属性 vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。

1.水平居中

content: inline or inline-* elements (like text or links)

.container {
    text-align: center;
}

content: block-level element

多个块级元素一行展示

.container {
    text-align: center;
}
.content-center {
    display: inline-block;
}

可实现多个块级多行展示(前提：知道width值px/em/%)

.content-center {
	width: 400px;
    margin: 0 auto;
}

2.垂直居中

content: for inline or inline-* elements (like text or links)

• 单行
  • padding-top = padding-bottom
  • line-height = height(需要注意的是，必须先设置字号font-size，再设置line-height，否则文本居中。因为字号的改变，会使行高发生改变。)
• 多行

  • padding-top = padding-bottom

  • Table cell（前提：知道container高度height值px/em/%）

      .container {
     		display: table;
      }
      .content-center {
      	display: table-cell;
      	verical-align: middle;
      }
    

  • flexbox（前提：知道container高度height值px/em/%）

      .container {
     		display: flex;
      	justify-content: center;
      	flex-direction: column;
      	height: 400px;
      }
    

  • 给父容器加一个伪类元素作为子内容的vertical:middle校准内容。

      .container {
      	position: relative;
      }
      .container::before {
          content: " ";
          display: inline-block;
          height: 100%;
          width: 1%;
      	vertical-align: middle;
      }
      .container content-center {
      	display: inline-block;
          vertical-align: middle;
      }
    

content: block-level element

• known: 元素的高度height值

  • 使用定位position与负外边距margin

      .container {
      	position: relative;
      }
      .content-center {
      	position: absolute;
        	top: 50%;
        	height: 100px;
        	margin-top: -50px; /* account for padding and border if not using box-sizing: border-box; */
      }
    

• unknown: 元素的高度height值

  • 使用定位position与transform

      .container {
      	position: relative;
      }
      .content-center {
      	position: absolute;
        	top: 50%;
        	transform: translateY(-50%);
      }
    

• flexbox（高度知不知都行，缺点是IE11+才能用）

    .container {
    	display: flex;
    	flex-direction: column;
    	justify-content: center;
    }
  

3.水平垂直居中

• known: 元素的高度height值和width值

  • 使用定位position与负外边距margin
    
    .container {
    
    position: relative;
    
    }

      .content-center {
      	position: absolute;
       	top: 50%;
        	left: 50%;
    
        	width: 300px;
        	height: 100px;
        	padding: 20px;
        	margin: -70px 0 0 -170px; /* 此处元素的高度、宽度要加上padding的大小 */
      }
    

• unknown: 元素的高度height值width值

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

• flexbox

    .parent {
      	display: flex;
    	justify-content: center;
    	align-items: center;
    }
  

浏览器兼容性

主要考虑IE浏览器，其他现代浏览器支持较好（chrome、firefox）

Method	IE
text-align	IE3+
vertical-aglign	IE4+
line-height	IE4+
table-cell	IE8+
position	IE9+
flexbox	IE11

如何选择最优方案

• 如果不用考虑兼容性的话，使用flexbox代码最简洁
• 考虑兼容性的话，margin,padding,text-align,vertical-align，line-height > table-cell > positon > flexbox，再结合具体需求选择最合适的方案，代码越清晰简洁越好。
• 通过上面的方案可知，这些属性很多时候都是配合着使用的,从而得到兼容性更好的方法，具体可见于 HOW TO CENTER IN CSS

参考资料

• Centering in CSS: A Complete Guide
• HOW TO CENTER IN CSS
• css行高line-height的一些深入理解及应用
• vertical-align:CSS-TRICKS每个value均有实例
• HTML和CSS高级指南之二——定位详解：大漠老师手把手教你，这次彻底搞懂定位问题