前端面试题-02css的居中方式

水平居中

方法一：margin和width实现

在容器上定义一个固定的宽度，然后配合margin（外边距）左右的值为auto。

 

效果实现了，扩展性不强，因为宽度无法确定，也就无法确定容器宽度。
优点：实现简单，浏览器兼容性强
缺点：扩展性差，无法自适应未知情况

方法二：inline-block和父元素text-align

仅inline-block属性是无法让元素水平居中，他的关键之处要在元素的父容器中设置text-align的属性为“center”，这样才能达到效果：

优点：简单易懂，扩展性强
缺点：需要额外处理inline-block的浏览器兼容性问题

 

方法三： 设置 position:relative 和 left:50%;

通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%,给子元素设置 position:relative 和 left:-50% 来实现水平居中。

 

垂直居中

1.常规元素的垂直居中

容器内元素display:inline/inline-block

这种情况就比较容易了，直接设置容器的text-align就可以实现内容元素的水平居中，设置垂直居中的话要设置容器的高度，然后设置容易的line-height==height就可以,不建议使用

2.：table-cell  

 

3.display:flex