position fixed 居中
1、水平居中
.footer {
height: 10%;
text-align: center;
position: relative;
left: 50%;
transform: translate(-50%, -50%); /*水平居中*/
top: 30px;
} 2、垂直居中:
.footer {
height: 10%;
text-align: center;
position: fixed;
top: 50%;
transform: translate(-50%, -50%); /*水平居中*/
left: 30px;
}
3、万能居中法:
#name{
position:fixed;
left:50%;
top:50%;
transform:translate(-50%,-50%);
z-index:1000;
}
、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、
通常情况下,我们通过操作margin来控制元素居中,代码如下:
1 #name{
2 maigin:0px auto;
3 }
但当我们把position设置为fixed时,例如:
1 #id{
2 position:fixed;
3 margin:0px auto;
4 }
以上代码中的margin:0px auto;会出现失效问题,盒子并未居中。这是因为fixed会导致盒子脱离正常文档流。
解决方法非常简单,只要应用如下代码即可:

1 #name{
2 position:fixed;
3 margin:0px auto;
4 right:0px;
5 left:0px;
6 }

若希望上下也可以居中,可采用如下代码:

1 #name{
2 position:fixed;
3 margin:auto;
4 left:0;
5 right:0;
6 top:0;
7 bottom:0;
8 }

万能居中法(未知大小呦):

1 #name{
2 position:fixed;
3 left:50%;
4 top:50%;
5 transform:translate(-50%,-50%);
6 z-index:1000;
7 }

position fixed 居中的更多相关文章
- css3 position fixed居中的问题
通常,我们要让某元素居中,会这样做: #element{ margin:0 auto; } 假设还想让此元素位置固定呢?一般我们会加入position:fixed,例如以下: #element{ po ...
- position:fixed 居中问题
设置Css属性position:fixed后如何使这个盒子居中呢?其实也很简单: 就是需要设置给这个div盒子设置属性: left:0; right:0; margin:0 auto; ******* ...
- 关于position:fixed;的居中问题
通常情况下,我们通过操作margin来控制元素居中,代码如下: #name{ maigin:0px auto; } 但当我们把position设置为fixed时,例如: #id{ position:f ...
- css中position:fixed实现div居中
上下左右 居中 代码如下 复制代码 div{ position:fixed; margin:auto; left:0; right:0; top:0; bottom:0; width:200px; h ...
- position:fixed;如何居中
div{ position:fixed; margin:auto; left:; right:; top:; bottom:; width:100px; height:100px; } 如果只需要左右 ...
- position:fixed div如何居中
div{position:fixed;margin:auto;left:0; right:0; top:0; bottom:0;width:200px; height:150px;}
- day2-设置position:fixed/absolute无法使用margin:auto调整居中
问题描述:父元素给定宽度,子元素给定宽度,设置子元素position为absolute/fixed后,无法使用margin:auto使子元素在父元素中水平居中 html代码如下: <div cl ...
- 使用属性position:fixed的时候如何才能让div居中
css: .aa{ position: fixed; top: 200px; left: 0px; right: 0px; width: 200px; height: 200px; margin-le ...
- 元素设置position:fixed属性后IE下宽度无法100%延伸
元素设置position:fixed属性后IE下宽度无法100%延伸 IE bug 出现条件: 1.div1设置position:fixed属性,并且想要width:100%的效果. 2.div2(下 ...
随机推荐
- centos6.5 手动安装gcc
gcc版本:gcc-4.4.7 rpm -Uvh mpfr-2.4.1-6.el6.x86_64.rpm rpm -Uvh cpp-4.4.7-16.el6.x86_64.rpmrpm -Uvh ...
- Java编程思想学习笔记——访问权限修饰词
几种访问权限修饰词 public,protected,private,friendly(Java中并无该修饰词,即包访问权限,不提供任何访问修饰词) 使用时,放置在类中成员(域或方法)的定义之前的,仅 ...
- win8.1的ie11无法打开127.0.0.1和本机IP访问
解决方法:把ie11安全选项里的启动保护模式对勾去掉!
- 多个Tomcat之间实现Session共享
对于高访问量.高并发量的网站或web应用来说,目前最常见的解决方案应该就是利用负载均衡进行server集群,例如比较流行的nginx+memcache+tomcat.集群之后比如我们有N个Tomcat ...
- js中判断浏览器版本
var ai = { ovb: { /** * 该对象用于判断系统,系统版本,浏览器,苹果设备等等功能.ovb是单词 Os Version Browser 的头字母缩写. */ _version_va ...
- Tomcat------启动时报错:Failed to start component [StandardEngine[Catalina].StandardHost[localhost].
启动报错信息: Failed to start component [StandardEngine[Catalina].StandardHost[localhost] 因此出现这种错误的原因可能有: ...
- SpringMVC -- 梗概--源码--壹--数据传递
附:实体类 Class : User package com.c61.entity; import java.text.SimpleDateFormat; import java.util.Date; ...
- MessageDigest类提供MD5或SHA等加密算法
MessageDigest可使用的加密方法有MD2\MD5\SHA-1\SHA-256\SHA-384\SHA-512,使用时候只替换相应参数值即可 MessageDigest md5 = Messa ...
- redis make错误处理
cc: ../deps/hiredis/libhiredis.a: No such file or directory cc: ../deps/lua/src/liblua.a: No such fi ...
- python的httplib、urllib和urllib2的区别及用
慢慢的把它们总结一下,总结就是最好的学习方法 宗述 首先来看一下他们的区别 urllib和urllib2 urllib 和urllib2都是接受URL请求的相关模块,但是urllib2可以接受一个Re ...