首页  >  问答  >  正文

html5 - html怎么让div居中啊??

伊谢尔伦伊谢尔伦2764 天前1258

全部回复(4)我来回复

  • ringa_lee

    ringa_lee2017-04-17 13:11:33

    没看你代码哈。
    不过让快元素居中,有多种方式:
    1: display:inline-block
    <style>

    .total{width:1000px;height:auto;border:1px solid #ccc;text-align:center;}
    .center{width:200px;height:50px;background-color:blue;display:inline-block;}

    </style>
    <p class='total'>

    <p class='center'></p>

    </p>

    2: 未知宽高:position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
    <style>

    .total{width:1000px;height:auto;border:1px solid #ccc;}
    .center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);}

    </style>
    <p class='total'>

    <p class='center'></p>

    </p>

    2: 已知宽高:width:200px;height:200px;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px);
    <style>

    .total{width:1000px;height:auto;border:1px solid #ccc;}
    .center{width:200px;height:50px;background-color:blue;position:absolute;left:50%;top:50%;transform:translate(-100px,-100px)}

    </style>
    <p class='total'>

    <p class='center'></p>

    </p>

    以上代码未经测试,若有问题再问哈

    回复
    0
  • 巴扎黑

    巴扎黑2017-04-17 13:11:33

    infelx 加justify 加align 不要太好用,不过记住要兼容

    回复
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:11:33

    保证金:0 自动

    回复
    0
  • ringa_lee

    ringa_lee2017-04-17 13:11:33

    http://jackzong.github.io/201...

    回复
    0
  • 取消回复