CSS3 不定高宽垂直水平居中的几种方式

1、flex布局

.father {
    dis play : flex;
    justify-content:  center ;
    align -i tems: center;
}

这种方式兼容性不好

2、pos IT ion + 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;
    vert ical -align: middle;
      text-align: center;
}

4、:before + display:inline-block

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

到此这篇关于CSS3 不定高 宽 垂直水平居中的 几种 方式的 文章 就介绍到这了,更多相关CSS3 不定高宽垂直水平居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

总结

以上是 为你收集整理的 CSS3 不定高宽垂直水平居中的几种方式 全部内容，希望文章能够帮你解决 CSS3 不定高宽垂直水平居中的几种方式 所遇到的问题。

如果觉得 网站内容还不错， 推荐好友。

查看更多关于CSS3 不定高宽垂直水平居中的几种方式的详细内容...