垂直水平居中--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中设置控件垂直布局,默认的是 ...
随机推荐
- 团队项目-BUG挖掘
测试硬件: 华为畅享5 测试平台: 安卓5.1 测试项目Git地址: https://github.com/RABITBABY/We-have-bing 测试Apk来源地址: http://www.a ...
- windows远程连接设置
1.设置整个服务器只允许一个连接. 使用组策略管理gpedit.msc, 计算机配置>管理模板>windows组件 >终端服务>限制连接数量,设为已启动,数量设置为1. 此设置 ...
- PHP实现HTML页面静态化
随着网站的内容的增多和用户访问量的增多,无可避免的是网站加载会越来越慢,受限于带宽和服务器同一时间的请求次数的限制,我们往往需要在此时对我们的网站进行代码优化和服务器配置的优化.一般情况下会从以下方面 ...
- Java 调用 google 翻译
1.Java代码 public class Translator { public String translate(String langFrom, String langTo, String wo ...
- 【EF】EF框架 Code First Fluent API
在Code First方法中,还可以通过Fluent API的方式来处理实体与数据表之间的映射关系. 要使用Fluent API必须在构造自定义的DbContext时,重写OnModelCreatin ...
- 【Java】list转换json的中文乱码问题
添加如图红框内容
- 【BZOJ2727】双十字(动态规划,树状数组)
[BZOJ2727]双十字(动态规划,树状数组) 题面 BZOJ 洛谷 题解 我们去年暑假的时候考试考过. 我当时写了个大暴力混了\(70\)分.... 大暴力是这么写的: 预处理每个位置向左右/上/ ...
- BZOJ3262:陌上花开 & 洛谷3810:三维偏序——题解
http://www.lydsy.com/JudgeOnline/problem.php?id=3262 https://www.luogu.org/problemnew/show/3810 Desc ...
- ZJOI 2017 day2 4.27
明天就要比赛啦,今天早点休息. 既然是随便扯,首先就是yyzx的wifi(宁波的这种wifi系统我第一次见,要打开任意一个浏览器,才能跳出界面,网还是挺快的) 上午是学车的翁伊嘉&猪猪侠讲课, ...
- RHEL 7中有关终端的快捷方式
快速启动终端 网上有不错的教程,只是有时候和版本有一定的出入,这里涉及小白博主自行摸索的过程(RHEL 7.4). 1.点击桌面右上角,选择设置(小扳手) 2.选择键盘(Keyboard) 3.将进度 ...