css中的居中的方法
一、垂直居中
(1)inline或者inline-*元素
1. 单行文字
- 设置上下padding相等
以前一直以为inline元素是没有上下的padding和margin的,其实不然,他们是有上下的padding和margin的,只是不会讲父元素撑开,所以称为残疾的盒模型。
- 将height与line-height设置相等,这个应该是用的最多了。
2. 多行文字
- 设置上下padding相等
- 设置vertical-align:middle
(2)块级元素
1. 使用display:flex
2. 使用display:table和table-cell,详见这里
3. 使用绝对定位:
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
二、水平居中
(1)inline或者inline-*元素
设置text-align:center
(2)一个块级元素
- 设置margin:0 auto;
- 使用绝对定位
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
上面这段css实现了水平和垂直都能居中,也可以单纯的使用translateX来定位,和上面的垂直定位类似
(3)多个块级元素
使用display:flex
css中的居中的方法的更多相关文章
- CSS中各种居中方法
CSS中各种居中方法,本文回顾一下,便于后续的使用. 水平居中方法 1.行内元素居中 行内元素居中是只针对行内元素的,比如文本(text).图片(img).按钮等行内元素,可通过给父元素设置 text ...
- css中关于居中的那点事儿
css中关于居中的那点事儿 关于居中,无论是水平居中,还是垂直居中都有很多方式,下面我来介绍一些常用的. 第一部分:水平居中 1.实现行内元素的居中.方法:在行内元素外面的块元素的样式中添加:text ...
- css中各种居中的奇技淫巧总结
css中各种居中的奇技淫巧总结 第一种,在固定布局中比较常用的技巧设置container的margin:0 auto: 第二种(从布局中入手) css .outer{ height:200 ...
- css中添加屏幕自适应方法(rem)
css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...
- css中的居中问题
前两天写了一篇关于display:table的用法,里面涉及到居中的问题,这两天愈发觉得css中的居中是一个值得关注的问题,现总结如下. 一.垂直居中 (1)inline或者inline-*元素 1. ...
- CSS中各种各样居中方法的总结
在开发前端页面的时候,元素的居中是一个永远都绕不开的问题.看似简单的居中二字,其实蕴含着许许多多的情况,对应着很多的处理方法,本文就试图对页面布局中的居中问题进行总结~~ 居中问题分为水平居中和竖直居 ...
- CSS中背景图片定位方法
转自:http://www.ruanyifeng.com/blog/2008/05/css_background_image_positioning.html 作者: 阮一峰 日期: 2008年5月 ...
- (转)HTML&CSS——background: url() no-repeat 0 -64px;CSS中背景图片定位方法
http://blog.csdn.net/oscar92420aaa/article/details/51304067 CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中 ...
- css 中 div垂直居中的方法
在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...
随机推荐
- Python操作 Excel表格
python 读写 excel 有好多选择,但是,方便操作的库不多,在我尝试了几个库之后,我觉得两个比较方便的库分别是 xlrd/xlwt.openpyxl. 我使用openpyxl 安装: pip ...
- NOIP2016 D2T2 蚯蚓
洛谷P2827 其实是一道不是很难的模拟题,暴力好像可以拿80,AC的话要发现其中隐含的单调性 首先是一个小技巧,每次将所有蚯蚓的长度都+q肯定时间复杂度很大,那我们就想,其他所有的蚯蚓加,就相当于取 ...
- Python私有变量(Private Variable)
Variables can be private which can be useful on many occasions. A private variable can only be chang ...
- 对redis高并发测试的研究
以下引用大神的: 测试项目: https://github.com/14251104246/redis-demo.git 准备 使用docker-compose命令启动redis服务器(可以用其他方式 ...
- CDMA与OFDM之技术比较
频谱利用率.支持高速率多媒体服务.系统容量.抗多径信道干扰等因素是目前大多数固定宽带无线接入设备商在选择CDMA(码分多址)或OFDM(正交 频分复用)作为点到多点(PMP)的关键技术时的主要出发点. ...
- 线程协作之threading.Condition
领会下面这个示例吧,其实跟java中wait/nofity是一样一样的道理 import threading # 条件变量,用于复杂的线程间同步锁 """ 需求: 男:小 ...
- 14 Spring Boot Shiro限制登录尝试次数
- input el-input 只能输入正整数验证
字母e在js中属于数字,所以一般的正则匹配 \d 是拦不住字母e 的 正确写法为: onKeypress="return (/[\d]/.test(String.fromCharCode(e ...
- Qt Creator 启动失败 可能的解决办法
用了一段时间Qt Creator莫名的打开失败 重装一遍,仍然不行: 网上搜到解决办法:删除 ~\AppData\Roaming\QtProject文件夹. linux下:~是/home/Your ...
- 从源码编译UE4,加快Setup.bat下载文件的环节
之前很傻,每次运行这个setup.bat都要等很久很久才能把4g多的东西下载完成,知道有一天突然发现了世外桃源…… 从命令行运行setup.bat -help,可以看到参数的说明(没错,参数可选,之前 ...