这篇文章给大家分享的是“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中不定高宽时怎么实现垂直水平居中”的文章就介绍到这了,更多相关的内容，欢迎关注群英网络，小编将为大家输出更多高质量的实用文章！

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

猜你喜欢

• 如何利用CSS3+less制作酷炫的星空动画效果

  这篇文章主要介绍了css3进阶之less实现星空动画的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

• 如何flex实现左边文字溢出右边自适应的布局效果

  这篇文章主要介绍了flex布局实现左侧文字溢出省略右侧文字自适应的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

• CSS伪类选择器是什么，有哪些类型

  今天我们详细了解一下伪类选择器，希望对大家有所帮助！伪类选择器 是一种允许通过未包含在HTML元素的状态信息来定位HTML元素的用法。伪类选择器 的具体用法就是向已有的选择器增加关键字，表示定位的HTML元素的状态信息。

• 用css怎样做B站的充电动画效果？

  现在很多朋友都有用B站，其中B站有一个给up主充电的功能，小编觉得挺有意思的，因此这篇文章就给大家分享一下用css+svg怎样做B站的充电动画效果，感兴趣的朋友就继续往下看吧。

• 前端项目中flex文本溢出的情况有哪些解决方案

  前端项目中flex文本溢出的情况有哪些解决方案？实际项目的操作过程或是学习过程中，不少人都会遇到这样的问题，接下来就让小编带大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！