垂直水平居中--css3
在移动前端制作中,很多新的css3特性能够帮助我们更好的制作。例如这个垂直水平居中问题,就有一个简单的代码可以解决:
利用CSS3的transform:translate
.center{
width:50%;
position: absolute;
top: 50%;
left: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
好处:
内容高度可变
代码量小
同时注意:
需要写厂商前缀
需要定义宽度
会和其他transform样式有冲突
某些情况下的边缘和字体渲染会有问题
兼容性:
http://caniuse.com/#search=transform 在这里看到2d的兼容性还是很全面,Android2.x,ios3.x都兼容,推荐用
利用Flexbox
.center {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
好处:
内容可以是任意高宽,溢出也能表现良好
可以用于各种高级布局技巧
注意:
需要在body上写样式,或者需要额外容器
需要各种厂商前缀兼容现代浏览器
可能有潜在的性能问题
兼容性:
移动设备基本兼容,可以放心使用,不过很容易掉坑,慎用。
垂直水平居中--css3的更多相关文章
- 使用Sass优雅并高效的实现CSS中的垂直水平居中(附带Flex布局,CSS3+SASS完美版)
实现css水平垂直居中的方法有很多,在这里我简单的说下四种比较常用的方法: 1.使用CSS3中的Flex布局 对于flex,我们要了解的是它是一个display的属性,而且必须要给他的父元素设置fle ...
- css3之transform属性实现div不定宽高垂直水平居中
transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...
- 采用translate实现垂直水平居中
今天分享一个利用css3新特性实现垂直水平居中的方法. 通过对元素进行绝对定位再配合transform中的translate实现. 代码如下: html <div id="conten ...
- css实现垂直水平居中的方法(个数不限)?
方法一:使用绝对定位 大家都知道margin:0 auto;能够实现水平居中,但却不知道margin:0 auto;也是可以实现垂直居中的: 给居中元素添加如下样式: .Absolute-Center ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法?)
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- 不定宽高的DIV,垂直水平居中
1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
- div盒子垂直水平居中
div盒子,水平垂直居中. <!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- Andriod中textview垂直水平居中及LinearLayout内组件的垂直布局
1.textview 垂直水平居中的设置 Android:gravity="center_vertical|center" 2.LinearLayout中设置控件垂直布局,默认的是 ...
随机推荐
- 通过一台服务器ssh多台主机远程修改网卡ip
在多台服务器环境下,更改所有的ip地址,网关,一台一台的登录修改显得复杂繁琐. 知识点: 参考#https://www.cnblogs.com/youngerger/p/9104144.html ...
- 【acm】杀人游戏(hdu2211)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2211 杀人游戏 Time Limit: 3000/1000 MS (Java/Others) M ...
- Communications link failure--分析之(JDBC的多种超时情况)
本文是针对特定的情景下的特定错误,不是所有Communications link failure错误都是这个引起的,重要的区分特点是:程序是不是在卡主后两个小时(服务器的设置)后程序才感知到,才抛出了 ...
- 【Linux 命令】- find 命令
find 是日常工具箱中功能更强大.更灵活的命令行工具之一,因此值得花费更多的时间. 最简单的,find 跟上路径寻找一些东西.例如: find / 它将找到(并打印出)系统中的每个文件.而且由于一切 ...
- Thread的run()与start()的区别
java的线程是通过java.lang.Thread类来实现的.VM启动时会有一个由主方法所定义的线程.可以通过创建Thread的实例来创建新的线程.每个线程都是通过某个特定Thread对象所对应的方 ...
- day 05 万恶之源-基本数据类型(dict)
05. 万恶之源-基本数据类型(dict)本节主要内容:1. 字典的简单介绍2. 字典增删改查和其他操作3. 字典的嵌套⼀一. 字典的简单介绍字典(dict)是python中唯⼀一的⼀一个映射类型.他 ...
- Codeforces Round#514 Div.2 翻车记
A:签到 #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> # ...
- 管理与技术未必不可兼得,一个20年IT老兵的码农生涯
作者|康德胜 我是一个喜欢写代码但几乎不太有机会写代码的CTO,也是一个看得懂财务报表.通过所有CFA(金融特许分析师)考试并获得FRM(金融风险经理)认证的拿到金融MBA的CTO,如果我有幸被称作码 ...
- 【题解】APIO2014回文串
哇哦~想不到我有生之年竟然能够做出字符串的题目ヾ(✿゚▽゚)ノ虽然这题比较裸但依然灰常开心! 首先有一个棒棒的性质:本质不同的回文串最多有 O(n) 个.首先 manacher 把它们都找出来,然后问 ...
- 【JQuery】文档操作
一.前言 接着上一章的内容,接着JQuery的学习 二.内容 addClass 向被选元素添加一个或多个类 $(selector).addClass(class) $(selector).addCla ...