开发者社区> 问答> 正文

如何实现不定宽高水平和垂直居中

如何实现不定宽高不定水平居中?absolute margin:二分之一宽高不顶用,这种情况是要宽高已知才能用

展开
收起
杨冬芳 2016-06-08 16:50:41 2082 0
1 条回答
写回答
取消 提交回答
  • IT从业

    1.最简单的flex布局,外层容器加上如下样式即可

    display: flex;
    justify-content: center;
    align-items: center;

    2.利用table-cell

    外层容器

    display:table-cell;
    text-align:center;
    vertical-align:middle;

    内部元素

    vertical-align:middle;
    display:inline-block;

    3.使用CSS3 transform

    外层容器

    display:relative

    内部元素

    transform: translate(-50%,-50%);
    position: absolute;
    top: 50%;
    left: 50%;
    2019-07-17 19:32:20
    赞同 展开评论 打赏
问答地址:
问答排行榜
最热
最新

相关电子书

更多
低代码开发师(初级)实战教程 立即下载
冬季实战营第三期:MySQL数据库进阶实战 立即下载
阿里巴巴DevOps 最佳实践手册 立即下载