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 border-image使用说明
Jun 23 HTML / CSS
用CSS禁用输入法(CSS3 UI规范)实例解析
Dec 04 HTML / CSS
用css3制作纸张效果(外翻卷角)
Feb 01 HTML / CSS
一款纯css3实现的竖形二级导航的实例教程
Dec 11 HTML / CSS
css3 实现元素弧线运动的示例代码
Apr 24 HTML / CSS
html5 标签
Jul 16 HTML / CSS
用html5实现语音搜索框的方法
Mar 18 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
浅谈HTML5 & CSS3的新交互特性
Jul 19 HTML / CSS
canvas进阶之贝塞尔公式推导与物体跟随复杂曲线的轨迹运动
Jan 10 HTML / CSS
Html5之title吸顶功能
Jun 04 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实现文件下载功能的几个代码分享
2014/05/10 PHP
PHP 读取文本文件内容并分页显示
2016/01/02 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
javascript笔试题目附答案@20081025_jb51.net
2008/10/26 Javascript
js function定义函数使用心得
2010/04/15 Javascript
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
利用webqq协议使用python登录qq发消息源码参考
2013/04/08 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
jQuery的层级查找方式分析
2016/06/16 Javascript
xcode中获取js文件的路径方法(推荐)
2016/11/05 Javascript
深入学习jQuery中的data()
2016/12/22 Javascript
基于vue.js实现侧边菜单栏
2017/03/20 Javascript
Angular.JS中的指令引用template与指令当做属性详解
2017/03/30 Javascript
node.js 抓取代理ip实例代码
2017/04/30 Javascript
详解Node.js串行化流程控制
2017/05/04 Javascript
jquery Ajax实现Select动态添加数据
2017/06/08 jQuery
Vue 实现分页与输入框关键字筛选功能
2020/01/02 Javascript
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
详解Python中的动态属性和特性
2018/04/07 Python
python操作excel的方法
2018/08/16 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
在Python 的线程中运行协程的方法
2020/02/24 Python
Django 再谈一谈json序列化
2020/03/16 Python
django实现模型字段动态choice的操作
2020/04/01 Python
使用Python对Dicom文件进行读取与写入的实现
2020/04/20 Python
python 写一个性能测试工具(一)
2020/10/24 Python
微软澳洲官方网站:Microsoft Australia
2017/01/10 全球购物
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
医生党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
渠道运营商合作协议书范本
2014/10/06 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
python面向对象版学生信息管理系统
2021/06/24 Python
一篇文章带你深入了解Mysql触发器
2021/08/02 MySQL
SQL 聚合、分组和排序
2021/11/11 MySQL
Windows11里微软已经将驱动程序安装位置A盘删除
2021/11/21 数码科技