元素的水平及垂直居中

水平居中

行内元素——text-align: center;
块级元素——margin: 0 auto;
多个块级元素——如果页面里有多个块状元素需要水平排列居中，可以将元素的display属性设置为inline-block，并且把父元素的text-align属性设置为center即可实现

垂直居中

单行的行内元素——设置height等于line-height即可

div { 
 height:25px; 
 line-height:25px; 
 overflow:hidden; 
}

多行的行内元素——组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素

.container {
  background: #222;
  width: 300px;
  height: 300px;
  /* 以下属性垂直居中 */
  display: table-cell;
  vertical-align:middle;
}

块级元素——使用transform属性来垂直移动来实现垂直居中

.item {
  top: 50%;
  position: absolute;
  transform: translateY(-50%); /* 这里我们使用css3的transform来达到类似效果 */
}

一个hack方案

.container {
  width:200px;
  height: 200px;
  /* 以下属性垂直居中 */
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

水平垂直居中

一般的行内/块级元素通过以上方法的简单组合即可实现水平垂直居中，下面介绍两个简单粗暴的方法：

transform

.item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

flex布局

.parent{
  display: flex;
  justify-content:center; /*水平居中*/
  align-items: center; /*垂直居中*/
  
  /* 注意这里需要设置高度来查看垂直居中效果 */
  background: #AAA;
  height: 300px;
}

水平居中
垂直居中
水平垂直居中

元素的水平及垂直居中

水平居中

垂直居中

水平垂直居中

FEATURED TAGS

FRIENDS