CSS的5种常用的垂直居中的方法
1、绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半
#child{
width: 200px;
height: 150px;
position: absolute;
left: 50%;
top:50%;
margin-top: -75px;
margin-left: -100px;
}
2、根据上面的方法有一定的变化,不过也是根据绝对定位
.child{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
}
3、用于文本且单行,line-height要等于父元素高度
.div{
text-align:center;
line-height: 100px;
background-color:#fff;
}
4、利用display:table;与display:table-cell;(注意只有.child框内元素会垂直居中)
.parent{
display: table;
}
.child{
display: table-cell;
vertical-align: middle;
text-align: center;
background-color: #fff;
}
5、利用css3的transfrom
.child{
width: 10px;
height: 10px;
background-color: #fff;
position: relative;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
}
6、绝对定位不需要知道宽高
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%); /*水平垂直居中*/
}
7、flex垂直居中方式
.child{
display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
CSS的5种常用的垂直居中的方法的更多相关文章
- CSS的7种常用的垂直居中的方法
1.绝对定位上下百分之五十然后上外边距做外边距都是他的宽高的一半 #child{ width: 200px; height: 150px; position: absolute; left: 50%; ...
- 通过CSS控制页面中的内容垂直居中的方法
方法一:通过行高(line-height)定位 line-height通常是用于调节一段文字的行与行之间的距离,或者说两行文字之间的距离,如果行高是500px,那么每一行中的文字距离本行的顶部就是25 ...
- 解析6种常用View 的滑动方法
View 的滑动是Android 实现自定义控件的基础,实现View 滑动有很多种方法,在这里主要讲解6 种滑动方法,分别是layout().offsetLeftAndRight()与offsetTo ...
- css实现块级元素水平垂直居中的方法?
父级给相对定位,子级给绝对定位,margin设置为auto,上下左右值设为0. 父级给相对定位,子级给绝对定位,设置left和top为50%,再向左和向上移动负的子级一半. 父级设置display:f ...
- js中几种常用的数组处理方法的总结
一.filter()用法 功能:用于筛选数组中满足条件的元素,返回一个筛选后的新数组. <script> $(function(){ var arr = [1,-2,3,4,-5]; va ...
- java十五个常用类学习及方法举例
<code class="language-java">import java.util.Scanner; import java.util.Properties; i ...
- css两种常用的不定宽高的水平垂直居中方法,记住它,不再为样式发愁
css 几种常用的简单容易记住的水平垂直居中方法 前言 正文 第一种方法 第二种方法 结束语 前言 我们在设计网页时,会大量的运用到水平垂直居中,如果知道元素的宽高,那水平垂直居中是很简单的,无非是用 ...
- 11种常用css样式之开篇文本字体学习
常见css样式:1.字体与颜色2.背景属性3.文本属性4.边框属性5.鼠标光标属性6.列表样式7.定位属性8.内外边距9.浮动和清除浮动10.滚动条11.显示和隐藏 文本:1.letter-spaci ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
随机推荐
- [LeetCode] Single Number II 单独的数字之二
Given an array of integers, every element appears three times except for one. Find that single one. ...
- ElasticSearch第二步-CRUD之Sense
ElasticSearch系列学习 ElasticSearch第一步-环境配置 ElasticSearch第二步-CRUD之Sense ElasticSearch第三步-中文分词 ElasticSea ...
- 学写js Calender控件
好几个月没写博客了,一直在赶项目.项目现在终于处于稳定的状态,只是修修改改.作为后台程序员的我真是苦逼啊,从web到手机端接口我都得写,杂七杂八的事情...这两天终于闲下来了,没事儿看了一下关于js日 ...
- Google C++命名规范
时间:2014.03.02 地点:基地 -------------------------------------------------------------------------------- ...
- eclipse环境搭建
百度经验http://jingyan.baidu.com/article/bea41d437a41b6b4c51be6c1.html 1.JAVA JDK 2.Andriod SDK eclipse里 ...
- ASP.NET 正则替换URL参数值
public class HomeController : Controller { public ActionResult Index() { var url = "http://www. ...
- 通过一个实例重新认识引用类型,值类型,数组,堆栈,ref
昨天在写代码时候遇到了一个问题,百思不得其解,感觉颠覆了自己对C#基础知识的认知,因为具体的情境涉及公司代码不便放出,我在这里举个例子,先上整个测试所有的代码,然后一一讲解我的思考过程: using ...
- Android基础测试题(四)
看了前两道题大家有没有发现,测试题少了(一),大家猜猜测试题(一)是什么? Android基础测试题(四): 需求: 建一个方法,格式化输出2016-11-14 10:15:26格式的当前时间,然后截 ...
- 用flashfxp做ftp镜像同步
简单说,用flashfxp建立上传或者下载队列,然后设定一个定时任务来处理这个队列,就能同步下载或上传制定的目录了. 本人遇到的需求只需要做同步上传,记录如下: 开发者PC ---> 国内win ...
- a版本十日冲刺总汇
DAY ONE: http://www.cnblogs.com/aruba/p/6041243.html 2016-11-08 DAY TWO: http://www.cnblogs.com/arub ...