美文网首页
css实现垂直水平居中

css实现垂直水平居中

作者: 招投标秘籍 | 来源:发表于2021-09-04 09:21 被阅读0次

    定位,top和left设置50%,再通过transform的translate(-50%, -50%)设置实现垂直水平居中

    定位,top和left设置50%,再通过margin-top和margin-left自己宽高的一半设置实现垂直水平居中

    定位,top,bottom,left,right都设置为0,再通过margin设置为auto实现垂直水平居中

    flex布局,先设置justify-content为center实现水平居中,再设置align-items为center实现垂直居中

    table布局,设置父元素display为table-cell,再设置vertical-align为middle实现垂直居中,把自己display设置为inline-block,父级设置text-align为center实现水平居中
    ————————————————
    版权声明:本文为CSDN博主「weixin_39691055」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
    原文链接:https://blog.csdn.net/weixin_39691055/article/details/112176215

    相关文章

      网友评论

          本文标题:css实现垂直水平居中

          本文链接:https://www.haomeiwen.com/subject/chxrwltx.html