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 和 HTML5 兼容速查表 图文
Apr 01 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
html5+css3之CSS中的布局与Header的实现
Nov 21 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
关于HTML5你必须知道的28个新特性,新技巧以及新技术
May 28 HTML / CSS
html5-Canvas可以在web中绘制各种图形
Dec 26 HTML / CSS
HTML5+CSS3应用详解
Feb 24 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
Sep 01 HTML / CSS
HTML5触摸事件(touchstart、touchmove和touchend)的实现
May 08 HTML / CSS
h5封装下拉刷新
Aug 25 HTML / CSS
z-index不起作用
Mar 31 HTML / CSS
CSS实现隐藏搜索框功能(动画正反向序列)
Jul 21 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下用rmdir实现删除目录的三种方法小结
2008/04/20 PHP
php表单提交实例讲解
2015/11/12 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
PHP异常处理定义与使用方法分析
2017/07/25 PHP
JS实现简单的Canvas画图实例
2013/07/04 Javascript
删除节点的jquery代码
2014/01/13 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
AngularJS bootstrap启动详解及实例代码
2016/09/14 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
详解如何使用nvm管理Node.js多版本
2019/05/06 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
node运行js获得输出的三种方式示例详解
2020/07/02 Javascript
python不带重复的全排列代码
2013/08/13 Python
python中sets模块的用法实例
2014/09/30 Python
Python单例模式实例分析
2015/01/14 Python
Python使用pyh生成HTML文档的方法示例
2018/03/10 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python爬虫中采集中遇到的问题整理
2020/11/27 Python
维也纳通行证:Vienna PASS
2019/07/18 全球购物
电钳专业个人求职信
2014/01/04 职场文书
大学运动会入场词
2014/02/22 职场文书
敬老院献爱心活动总结
2014/07/08 职场文书
党员干部观看《周恩来四个昼夜》思想汇报
2014/09/10 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
2014年化验室工作总结
2014/11/21 职场文书
项目安全员岗位职责
2015/02/15 职场文书
2015年消防工作总结
2015/04/24 职场文书
公司更名通知函
2015/04/24 职场文书
建党伟业电影观后感
2015/06/01 职场文书
南京大屠杀观后感
2015/06/02 职场文书
运动会三级跳加油稿
2015/07/21 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python