CSS3中不定高宽时怎么实现垂直水平居中-群英

上一篇：用纯CSS写文本溢出截断省略效果怎么做，优缺点是什么下一篇：在CSS中如何将滚动条隐藏，实现方法有哪些

这篇文章给大家分享的是“CSS3中不定高宽时怎么实现垂直水平居中”，对大家学习和理解有一定的参考价值和帮助，有这方面学习需要的朋友，接下来就跟随小编一起学习一下吧。

1、flex布局

.father {
    display: flex;
    justify-content: center;
    align-items: center;
}

这种方式兼容性不好

2、position + transform

.son {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

IE9以下不支持transform属性

3、table + table-cell

.father {
    display: table;
}
.son {
    display: table-cell;
    vertical-align: middle;
      text-align: center;
}

4、:before + display:inline-block

.father {
  text-align: center;
}
.father::before {
  content: '';
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
.son {
  display: inline-block;
}

这篇关于“CSS3中不定高宽时怎么实现垂直水平居中”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

标签： CSS3垂直水平居中

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

上一篇：用纯CSS写文本溢出截断省略效果怎么做，优缺点是什么下一篇：在CSS中如何将滚动条隐藏，实现方法有哪些