前端面试 html css 如何让一个盒子水平垂直居中？

方法1 使用子绝父相定位推荐

说明：

让父元素相对定位，因为要让子元素以父元素为参考对象，如果父元素不设置定位，子元素的参考对象就是整个页面document；

子元素绝对定位，top：50%；left：50%;都是相对父元素的高宽的50%设置的；最后一步分为2中实现代码：已知子元素高宽和未知子元素高宽；

已知高宽：matgin-top:- height / 2; margin-left:- width / 2;

未知高宽：transform: translate( - 50% , - 50%); 位移：translate (x , y) ; x， y 是百分比时是自己高宽的百分比；

效果：

实现代码：

<!DOCTYPE html>

<html lang="en">

  <head>

    <style>

      .parent {

        position: relative;

        width: 500px;

        height: 500px;

        background-color: pink;

      }

      .child {

        position: absolute;

        top: 50%;

        left: 50%;

        /* 已知子元素的宽高 高度 宽度的一半给上、左边距 注意是负数 */

        margin-top: -50px;

        margin-left: -50px;

        /* 未知子元素宽高 */

        /* transform: translate(-50%, -50%); */

        width: 100px; //注 ：使用位移时宽高可以不设置

        height: 100px; //

        background-color: skyblue;

      }

    </style>

  </head>

  <body>

    <!-- 盒子水平垂直居中 -->

    <div class="parent">

      父元素相对定位

      <div class="child">子元素绝对定位</div>

    </div>

  </body>

</html>

方法二子绝父相定位定位值取 0 margin：auto

说明：让子元素四个方向的定位 l ，r ，t ，b 都为0，此时小盒子还位于原位，使用margin: auto让他上和下，左和右的外边距保持一致。由于小盒子四个方向的定位值都为0，所以会自动将小盒子拉到正中间。但是子盒子的高宽必须已知，如果不给子元素高宽，子元素会铺满父元素。

<!DOCTYPE html>

<html lang="en">

  <head>

    <style>

      .parent {

        /* 父元素相对定位 */

        position: relative;

        width: 500px;

        height: 500px;

        background-color: pink;

      }

      .child {

        /* 子元素绝对定位 */

        position: absolute;

        margin: auto;

        width: 100px;

        height: 100px;

        /* 四个方位值 为 0 */

        left: 0;

        top: 0;

        right: 0;

        bottom: 0;

        background-color: skyblue;

      }

    </style>

  </head>

  <body>

    <!-- 盒子水平垂直居中 -->

    <div class="parent">

      父元素相对定位

      <div class="child">子元素绝对定位</div>

    </div>

  </body>

</html>

方法三：利用 display : table-cell

知识储备：

关于 text-align:center; text-align 属性规定元素中的文本的水平对齐方式。该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式。cneter参数让把文本排列到中间。单纯地看这句话你可以知道该属性可以让文本居中显示，但是除此之外，该属性还可以让父元素为块元素的行内元素或行内块元素居中显示。

关于table-cell：

display：table-cell；会使元素表现的类似一个表格中的单元格td，利用这个特性可以实现文字的垂直居中效果。同时它也会破坏一些CSS属性，使用table-cell时最好不要与float以及position: absolute一起使用，设置了table-cell的元素对高度和宽度高度敏感，对margin值无反应，可以响应padding的设置，表现几乎类似一个td元素。

 <style>

      .fa {

        display: table-cell;

        /* 垂直居中 */

        vertical-align: middle;

        /* 水平居中 */

        text-align: center;

        width: 400px;

        height: 400px;

        background-color: pink;

      }

      .son {
　　　　　　/* 行内块显示 */

        display: inline-block;

        width: 100px;

        height: 100px;

        background-color: lime;

      }

    </style>

  </head>

  <body>

    <div class="fa">

      <div class="son"></div>

    </div>

  </body>

方法四：利用 flex 布局 display : flex

flex布局特点：灵活、快速、简单、但是兼容性差。flex布局是浏览器提倡的布局模型、避免浮动脱标的问题

组成部分：

弹性容器：父元素

弹性盒子：子元素

设置方式：给父元素添加display：flex；，子元素可以自动的挤压或拉伸。有主轴（justify-content:xxx）控制；侧轴(align-items:xxx)；

align：排列：校准；使一致； items：项目； justify：使对齐；conten：内容

    <style>

      .parent {

        /* flex布局 */

        display: flex;

        /* 水平(主轴)居中 */

        justify-content: center;

        /* 垂直(侧轴居中) */

        align-items: center;

        width: 500px;

        height: 500px;

        background-color: pink;

      }

      .child {

        width: 100px;

        height: 100px;

        background-color: skyblue;

      }

    </style>

  </head>

  <body>

    <!-- 盒子水平垂直居中 -->

    <div class="parent">

      <div class="child"></div>

    </div>

  </body>