css中的居中问题

前两天写了一篇关于display：table的用法，里面涉及到居中的问题，这两天愈发觉得css中的居中是一个值得关注的问题，现总结如下。

一、垂直居中

（1）inline或者inline-*元素

   1. 单行文字

• 设置上下padding相等

　　　以前一直以为inline元素是没有上下的padding和margin的，其实不然，他们是有上下的padding和margin的，只是不会讲父元素撑开，所以称为残疾的盒模型。

• 将height与line-height设置相等，这个应该是用的最多了。

  2. 多行文字

• 设置上下padding相等
• 设置vertical-align：middle

（2）块级元素

  1. 使用display：flex

  2. 使用display：table和table-cell，详见这里

  3. 使用绝对定位：

.parent { 
  position: relative; 
}
.child { 
  position: absolute;
  top: 50%; 
  transform: translateY(-50%); 
}

二、水平居中

 （1）inline或者inline-*元素

      设置text-align：center

 （2）一个块级元素

• 设置margin：0 auto；
• 使用绝对定位

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

      上面这段css实现了水平和垂直都能居中，也可以单纯的使用translateX来定位，和上面的垂直定位类似

 （3）多个块级元素

       使用display：flex

总结： 滚去学习flex了。。。。。。。

 

转载于:https://www.cnblogs.com/stephen666/p/7011364.html