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

参考资料

posted @ 2017-07-27 22:32  花森煜米  阅读(307)  评论(0)  编辑  收藏  举报