如何在一个div中使其子div居中

网上其他地方已讲述过对其的不同实现方式,今天主要做一个详细的汇总,希望对大家有帮助。
ps:我面试的时候就被问到过这个问题,当时都回答错了,蓝瘦。

假设父div的类名为father,子div的类名为son。在html中的形式如下:
接下来用css设置son居中的方法主要有4种。
  1. 方法一(使用绝对布局):
    .father{
    width:500px;
    height:500px;
    position:relative;
    background-color:red;
    }
    .son{
    width:200px;
    height:200px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-100px;
    margin-left:-100px;
    background-color:black;
    }
    效果图如下:
    如何在一个div中使其子div居中_第1张图片

  2. 方法二(使用table-cell形式)
    .father{
    width:500px;
    height:500px;
    display:table-cell;
    text-align:center;
    vertical-align:middle;
    background-color:red;
    }
    .son{
    width:200px;
    height:200px;
    display:inline-block; ps:这句话一定要加,不然没效果哦
    background-color:black;
    }
    效果如上
    3.方法三(使用弹性布局flex)
    .father{
    width:500px;
    height:500px;
    display:flex;
    justify-content:center; 内容水平居中
    align-items:center; 内容垂直居中
    background-color:red;
    }
    .son{
    width:200px;
    height:200px;
    background-color:black;
    }
    效果如上
    4.方法四(使用绝对布局)
    .father{
    width:500px;
    height:500px;
    display:relative;
    background-color:red;
    }
    .son{
    width:200px;
    height:200px;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin:auto;
    background-color:black;
    }
    效果如上

这是目前我所了解的4种方法,ie和chrome都兼容,其他浏览器没测,目测是都兼容的。欢迎大家查漏补缺!

你可能感兴趣的:(web前端)