CSS常见面试题--水平垂直居中

面试题：水平垂直居中你知道几种方式？各有什么特点？

方法一：绝对定位+负值margin法

要点：

1、已知子元素的宽高 

2、子元素绝对定位（top:50%,left:50%） 

3、子元素负值margin(margin-left,margin-top的负值各为子元素宽高的50%)

 <!-- 一、绝对定位+负值margin:已知父元素及子元素的宽高 -->
  <section id="absolute-minus-margin">
    <style media="screen">
      #absolute-minus-margin .father{
        width: 500px;
        height: 500px;
        position: relative;
        border:1px solid red;
      }
      #absolute-minus-margin .father .child{
        width: 200px;
        height: 200px;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -100px;
        border: 1px solid red;
      }
    </style>
    <div class="father">
      <div class="child"></div>
    </div>
  </section>

方法二：绝对定位+margin:auto

要点：

1、已知子元素宽高

2、子元素绝对定位（top:0,left:0,right:0,bottom:0）

3、子元素margin:auto

  <section id="absolute-topleftrightbottom-margin">
    <style>
      #absolute-topleftrightbottom-margin .father{
         width: 500px;
         height: 500px;
         position: relative;
         border:1px solid #000;
      }
      #absolute-topleftrightbottom-margin .father .child{
         position: absolute;
         width: 200px;
         height: 200px;
         background-color: pink;
         top:0;
         left:0;
         right: 0;
         bottom: 0;
         margin: auto;
      }
    </style>
    <div class="father">
      <div class="child">绝对定位+marigin:auto</div>
    </div>
  </section>

方法三：绝对定位+transform

要点

1、子元素的宽高可知可不知

2、子元素绝对定位（top:50%,left:50%）

3、子元素transform:translate(-50%,-50%)

  <!-- 2、绝对定位+transform:子元素宽高可知可不知 -->
  <section id="absolute-transform">
    <style>
      #absolute-transform .father{
         width: 500px;
         height: 500px;
         position: relative;
         border:1px solid #000;
      }
      #absolute-transform .father .child{
        /* width: 200px;
        height: 200px; */
        border:1px solid #000;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
      }
    </style>
    <div class="father">
      <div class="child">绝对定位+transform</div>
    </div>    
  </section>

方法四：flex

要点

1、子元素的宽高可知可不知

2、父元素：display:flex;align-items:center;justify-content:center

 <section id="flex">
    <style>
      #flex .father{
         width: 500px;
         height: 500px;
         display: flex;
         align-items: center;
         justify-content: center;
         border:1px solid #000;
      }
      #flex .father .child{
        background-color: pink;
      }
    </style>
    <div class="father">
      <div class="child">flex:我是需要居中对齐的元素</div>
    </div>
  </section>

方法五：flex+margin:auto

要点

1、子元素的宽高可知可不知

2、父元素：display:flex

3、子元素：margin:auto

  <!-- 5、flex变异布局:子元素宽高可知可不知 -->
  <section id="flex">
    <style>
      #flex .father{
         width: 500px;
         height: 500px;
         display: flex;
         border:1px solid #000;
      }
      #flex .father .child{
        margin: auto;
        background-color: pink;
      }
    </style>
    <div class="father">
      <div class="child">flex变异布局:我是需要居中对齐的元素</div>
    </div>
  </section>

方法六：table-cell

要点

1、子元素的宽高可知可不知

2、父元素：display:table-cell;text-align:center;vertical-align:middle

3、子元素：display:inline-block

  <!-- 6、table-cell: 子元素宽高可知可不知-->
  <section id="table-cell">
    <style>
      #table-cell .father{
        width: 500px;
        height: 500px;
        border:1px solid #000;
        display: table-cell;
        text-align: center;
        vertical-align: middle;
      }
      #table-cell .child{
        background-color: pink;
        display: inline-block; /*不知道宽高的时候就这么写*/
        /* margin: auto; 已知宽高的时候可以这么写 */
      }
    </style>
    <div class="father">
      <div class="child">table-cell: 子元素宽高可知可不知</div>
    </div>
  </section>

方法七：grid+margin:auto

要点

1、子元素的宽高可知可不知

2、父元素：display:grid

3、子元素：margin:auto

  <!-- 7、grid+margin:auto：子元素宽高可知可不知 -->
  <section id="grid">
    <style>
      #grid .father{
        display: grid;
        width: 500px;
        height: 500px;
        border:1px solid #000;
      }
      #grid .child{
        background-color: pink;
        /* width: 200px;
        height: 200px; */
        margin: auto;
      }
    </style>
    <div class="father">
      <div class="child">grid+margin:auto：子元素宽高可知可不知</div>
    </div>
  </section>

总结：内联元素和块级元素的水平居中方式

内联元素居中布局方式

①水平居中

• 行内元素可设置text-align：center
• flex布局设置父元素：display:flex;justify-content:center

②垂直居中

• 单行文本父元素确定高度：height == line-height
• 多行文本父元素确定高度：display:table-cell;vertical-align:middle

块级元素居中布局方式

①水平居中

定宽：margin:0 auto

flex布局设置父元素：display:flex;justify-content:center

绝对定位+负值margin

绝对定位+transform:translateX(-50%)

table-cell布局设置父元素：display:table-cell;text-align:center

②垂直居中

flex布局设置父元素：display:flex;align:center

display布局设置父元素：display:tabel-cell;vertical-align:middle

position：absolute+负值margin

position:absolute+transform:translateY(-50%)