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 相关文章推荐
Web前端绘制0.5像素的几种方法
Aug 11 HTML / CSS
CSS3 网页下拉菜单代码解释 中文翻译
Feb 27 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
html5标记文字_动力节点Java学院整理
Jul 11 HTML / CSS
Bootstrap 学习分享
Nov 12 HTML / CSS
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
Dec 13 HTML / CSS
html5表单及新增的改良元素详解
Jun 07 HTML / CSS
手机端用rem+scss做适配的详解
Nov 15 HTML / CSS
使用html2canvas.js实现页面截图并显示或上传的示例代码
Dec 18 HTML / CSS
html5 canvas手势解锁源码分享
Jan 07 HTML / CSS
html5 移动端视频video的android兼容(去除播放控件、全屏)
Mar 26 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
PHP截取中文字符串的问题
2006/07/12 PHP
PHP批量删除、清除UTF-8文件BOM头的代码实例
2014/04/14 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
win10下 php安装seaslog扩展的详细步骤
2020/12/04 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
jquery.boxy插件的iframe扩展代码
2010/07/02 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
jQuery Validate表单验证插件的基本使用方法及功能拓展
2017/01/04 Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
2017/02/23 Javascript
详解Node.js利用node-git-server快速搭建git服务器
2017/09/27 Javascript
详解vue的数据劫持以及操作数组的坑
2019/04/18 Javascript
vue+element加入签名效果(移动端可用)
2019/06/17 Javascript
JavaScript中数组去重的5种方法
2020/07/04 Javascript
react的hooks的用法详解
2020/10/12 Javascript
Python的词法分析与语法分析
2013/05/18 Python
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Python+OpenCV实现车牌字符分割和识别
2018/03/31 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
pyqt5 使用label控件实时显示时间的实例
2019/06/14 Python
Django  ORM 练习题及答案
2019/07/19 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
python下载库的步骤方法
2019/10/12 Python
python实现图片转字符画
2021/02/19 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
美国珠宝网上商店:Jeulia
2016/09/01 全球购物
梅西酒窖:Macy’s Wine Cellar
2018/01/07 全球购物
C#中的验证控件有几种
2014/03/08 面试题
六年级数学教学反思
2014/02/03 职场文书
区优秀教师事迹材料
2014/02/10 职场文书
实习指导老师评语
2014/04/26 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
房产证明范本
2015/06/19 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
golang实现浏览器导出excel文件功能
2022/03/25 Golang