前端工程师面试第一弹——水平居中&垂直居中&水平垂直都居中

曾经的面试中，布局都是问的比较多的，不过最近面试的几个公司，涉及到的都是js的问题相对多一些，我想大概是因为，最近框架用的越来越多，js的基础也就越来越重要，可能如果js水平欠缺的话，很难去掌握好一门框架，也就很难适应最近的前端开发工作

一、水平居中

1.普通块级元素

比如div，p，h1～h6等等。

text-align:center;

2.固定宽度的block元素

设置margin值,对于下面的div元素，在未设置margin值之前，文字在div中水平居中，但是div在整个浏览器中却并没有居中。使用该方法一定要注意需要有固定的宽度，因为默认的话占据100%的宽度。

div{
    width: 500px;
    height: 300px;
    text-align: center;
    background-color: green;
    margin: 0 auto;
}
<div>水平居中</div>

3.内联元素

只需要把内联元素包裹进一个属性display为block的父元素中并对父元素设置text-align属性即可。

适用元素:文字、链接以及其他inline或者inline-*类型元素(inline-block, inline-table, inline-flex)

span{
    display: block;
    text-align: center;
}
<span>
    <a href="#">链接一</a>
    <a href="#">链接二</a>
    <a href="#">链接三</a>
</span>

4.多个块状元素(一)

如果页面有多个块状元素需要水平排列居中，可以将元素的属性设置为display:inline-block，并且把父元素的text-align属性设置为center。

如果需要垂直排列居中的话，可以使用margin值

### css
div{
    text-align: center;
}
h2{
    display: inline-block;
}
### html
<div>
    <h2>二级标题一</h2>
    <h2>二级标题二</h2>
    <h2>二级标题三</h2>
</div>

5.多个块状元素(二)

使用flexbox布局方式，只需要把需要设置的块状元素的父元素的display设置为flex，并且设置justify-content为center。

### css
div{
    display: flex;
    justify-content: center;
}
### html
<div>
    <h2>二级标题一</h2>
    <h2>二级标题二</h2>
    <h2>二级标题三</h2>
</div>

6.多个块状元素(三)

三个块状元素垂直排列水平居中

********使用text-align属性********
### css
div{
    text-align: center;
}
### html
<div>
    <h2>二级标题一</h2>
    <h2>二级标题二</h2>
    <h2>二级标题三</h2>
</div>
********使用flex属性********
### css
div{
    display: flex;
    justify-content: center;
    flex-direction: column;
}
h2{
    align-self: center;
}
### html
<div>
    <h2>二级标题一</h2>
    <h2>二级标题二</h2>
    <h2>二级标题三</h2>
</div>

7.使用table属性

对于父元素和子元素的宽度都确定的情况，适合通过display:table-cell和margin-left实现CSS水平居中。

使用时，父元素display:table-cell，子元素给剩余宽度一半的margin-left。

### css
div{
    background-color: red;
    width: 500px;
    height: 300px;
    display: table-cell;
}
h2{
    background-color: blue;
    width: 200px;
    margin-left: 150px;
}
### html
<div>
    <h2>二级标题一</h2>
    <h2>二级标题二</h2>
    <h2>二级标题三</h2>
</div>

8.使用绝对定位

### css
div{
    background-color: red;
    width: 500px;
    height: 300px;
    position: absolute;
}
h2{
    background-color: blue;
    width: 200px;
    margin-left: 150px;
}
### html
<div>
    <h2>二级标题一</h2>
    <h2>二级标题二</h2>
    <h2>二级标题三</h2>
</div>

9.fit-content

使用fit-content与margin结合

• fit-content
  大概理解就是包裹的意思，如果一个标签的属性设置为fit-content直观的感觉就是背景颜色在宽度上表现为紧紧包围着文字。

  ### css
  div{
      background-color: red;
      width: 500px;
      height: 300px;
  }
  h2{
      background-color: blue;
      width: fit-content;
      margin: 0 auto;
  }
  ### html
  <div>
      <h2>二级标题一</h2>
      <h2>二级标题二</h2>
      <h2>二级标题三</h2>
  </div>

10.translate属性

适用于display为block或者是inline-block的元素。另外如果有多个垂直排列的元素的话，会发生重叠。比如下面的例子中有多个p标签，那么他们会重合到一起去。

### css
div{
    position: relative;
}
span{
    display: inline-block;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
### html
<div>
    <span>水平居中</span>
</div>
或者
<div>
    <p>水平居中</p>
</div>

11.使用绝对定位，父元素大小不知，但知道子元素的宽度

### css
div{
    position: relative;
}
p{
    position: absolute;
    width: 宽度值;
    left:50%;
    margin-left: -(宽度值/2);
}
### html
<div>
    <p>段落居中</p>
</div>

以上代码中，p元素相对于div元素确实是水平居中的，但是其中的文字却并没有居中，如果想要设置文字居中的话，可以再继续添加以恶搞text-align属性为center即可。

二、垂直居中

1.单行行内元素

当一个行内元素，即inline，inline-*类型的元素需要居中的话，可将它的line-height同时设置为父元素的高度即可实现垂直居中效果。
height=line-height

div{
    height: 300px;
    background-color: red;
}
span{
    line-height: 300px;
}
<div>
    <span>水平垂直居中</span>
</div>

2.多行行内元素

组合使用display:table-cell和vertical-align:middle属性来定义需要居中的元素的父容器元素生成效果。

### css
div{
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    height: 300px;
}
span{
    color: #fff;
}
### html
<div>
    <span>时维九月，序属三秋。潦水尽而寒潭清，烟光凝而暮山紫。
    俨骖騑于上路，访风景于崇阿；临帝子之长洲，得天人之旧馆。
    层峦耸翠，上出重霄；飞阁流丹，下临无地。鹤汀凫渚，穷岛屿之萦回；桂殿兰宫，即冈峦之体势。</span>
</div>

3.已知高度的块状元素

将待居中元素设置为绝地定位，并且设置margin为居中元素高度一半的负值

### css
 div{
    height: 100px;
    width: 100px;
    position: absolute;
    top: 50%;
    margin-top: -50px;
    padding: 0;
    background-color: red;
}
### html
<div></div>
⚠️如果元素有padding值的话，此时margin-top 的负值要再减去相对应的padding-top值。比如上面的代码中如果padding-top为20px，那么，此时的margin-top等于-50—（20/2）=-60px；

4.未知高度的块状元素

使用transform属性来垂直移动来实现垂直居中：类似于水平居中，也曾使用过这个方法。只不过是translateX。

### css
div{
    background-color: red;
    top: 50%;
    position: absolute;
    transform: translateY(-50%);
}
### html
<div>离离原上草一岁一枯荣</div>

三、垂直水平都居中

1.已经宽度和高度的块状元素

使用绝对定位，将margin-left和margin-top分别设置为宽度和高度一半的负值即可。

### css
div{
    width: 300px;
    height: 300px;
    background-color: red;
    top: 50%;
    left: 50%;
    position: absolute;
    margin-top: -150px;
    margin-left: -150px;
    //这两行是为了使文字也水平垂直居中
    text-align: center;
    line-height: 300px;
}
### html
<div>离离原上草一岁一枯荣</div>

2.未知宽度和高度的元素

transform属性

### css
div{
    background-color: red;
    top: 50%;
    left: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}
### html
<div>离离原上草一岁一枯荣</div>

3.flex

⚠️上面几个都是div相对于整个浏览器是水平垂直居中的，但是这个呢，是div中包裹的文字相对于div元素的宽度(100%)高度水平垂直居中的。

### css
div{
    background-color: red;
    height: 300px;
    display: flex;
    justify-content: center;//水平方向
    align-items: center;//垂直方向
}
### html
<div>离离原上草一岁一枯荣</div>