search

Home  >  Q&A  >  body text

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

伊谢尔伦伊谢尔伦2872 days ago1324

reply all(4)I'll reply

  • ringa_lee

    ringa_lee2017-04-17 13:11:33

    I didn’t read your code.
    But there are many ways to center the fast element:
    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: Unknown width and height: 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: Known width and height: 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>

    The above code has not been tested, if you have any questions please ask

    reply
    0
  • 巴扎黑

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

    Infelx plus justify plus align are not easy to use, but remember to be compatible

    reply
    0
  • 天蓬老师

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

    margin:0 auto

    reply
    0
  • ringa_lee

    ringa_lee2017-04-17 13:11:33

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

    reply
    0
  • Cancelreply