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


Posted in HTML / CSS onMarch 26, 2020

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 不定高宽垂直水平居中内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
纯CSS3代码实现switch滑动开关按钮效果
Aug 30 HTML / CSS
CSS3属性使网站设计增强同时不消弱可用性
Aug 29 HTML / CSS
利用CSS3的特性改变文本选中时的颜色
Sep 11 HTML / CSS
你应该知道的30个css选择器
Mar 19 HTML / CSS
详解CSS3的图层阴影和文字阴影效果使用
Jun 09 HTML / CSS
浅谈css3中calc在less编译时被计算的解决办法
Dec 04 HTML / CSS
CSS3实现可翻转的hover效果
May 23 HTML / CSS
CSS实现聊天气泡效果
Apr 26 HTML / CSS
HTML5新标签兼容——> 的两种方法
Sep 12 HTML / CSS
浅谈移动端网页图片预加载方案
Nov 05 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
前端水印的简单实现代码示例
Dec 02 HTML / CSS
使用 CSS3 中@media 实现网页自适应的示例代码
Mar 24 #HTML / CSS
css3通过scale()、rotate()实现放大、旋转
Mar 19 #HTML / CSS
CSS3属性 line-clamp控制文本行数的使用
Mar 19 #HTML / CSS
CSS3实现文字描边的2种方法(小结)
Feb 14 #HTML / CSS
用css3实现转换过渡和动画效果
Mar 13 #HTML / CSS
利用CSS3的3D效果制作正方体
Mar 10 #HTML / CSS
css3 transform导致子元素固定定位变成绝对定位的方法
Mar 06 #HTML / CSS
You might like
咖啡与牛奶
2021/03/03 冲泡冲煮
PHP HTML JavaScript MySQL代码如何互相传值的方法分享
2012/09/30 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
详解Laravel视图间共享数据与视图Composer
2016/08/04 PHP
Windows平台实现PHP连接SQL Server2008的方法
2017/07/26 PHP
CSS+JS构建的图片查看器
2006/07/22 Javascript
javascript获取作用在元素上面的样式属性代码
2012/09/20 Javascript
jquery动态更换设置背景图的方法
2014/03/25 Javascript
javascript常用函数(1)
2015/11/04 Javascript
layui文件上传实现代码
2017/05/20 Javascript
基于vue2实现左滑删除功能
2017/11/28 Javascript
JS实现的DOM插入节点操作示例
2018/04/04 Javascript
JavaScript数组去重算法实例小结
2018/05/07 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
详解element-ui日期时间选择器的日期格式化问题
2019/04/08 Javascript
判断文字超过2行添加展开按钮,未超过则不显示,溢出部分显示省略号
2019/04/28 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
Vue解决echart在element的tab切换时显示不正确问题
2020/08/03 Javascript
python中的字典使用分享
2016/07/31 Python
Django中的CBV和FBV示例介绍
2018/02/25 Python
Python实现迭代时使用索引的方法示例
2018/06/05 Python
Selenium元素的常用操作方法分析
2018/08/10 Python
Django 实现购物车功能的示例代码
2018/10/08 Python
详解python中递归函数
2019/04/16 Python
python 实现二维字典的键值合并等函数
2019/12/06 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
社区活动总结报告
2014/05/05 职场文书
汽修专业自荐信
2014/07/07 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
Python编写nmap扫描工具
2021/07/21 Python
深入理解go缓存库freecache的使用
2022/02/15 Golang
Python+Matplotlib图像上指定坐标的位置添加文本标签与注释
2022/04/11 Python
如何使用python包中的sched事件调度器
2022/04/30 Python
Spring Boot 的创建和运行示例代码详解
2022/07/23 Java/Android