盒子绝对定位 position:foxed ; 居中
方法1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
width: 100%;
height: 1600px;
background-color: #c9c7c7; }
p{
max-width: 500px;
width: 100%;
background: red;
position: fixed;color: white;
text-align: center;
left: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body> <p>我是绝对定位 我需要居中</p> </body>
</html>
方法2 （替换上面style 的p标签的样式 ）
p{
max-width: 500px;
width: 100%;
background: red;
position: fixed;color: white;
text-align: center;
left:50%;
transform: translateX(-50%);
}
盒子绝对定位 position:foxed ; 居中的更多相关文章
- css绝对定位元素实现居中的几个方法
一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...
- 让绝对定位的div居中
最近看到一个问题就是让绝对定位的div居中,在尝试了top:50%:left:50%:后发现,居中是有问题的并不是想象中的样子 需要再加两句margin-top:-盒子高度的一般px margin- ...
- 盒子模型&position定位
有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...
- position fixed 居中
1.水平居中.footer { height: 10%; text-align: center; position: relative; left: 50%; transform: translate ...
- Css float 盒子模型 position
属性: float 浮动 浮动的内容用div包起来,给div设置宽高 clear 清除浮动. box-sizing 标准模式下的盒模型 content-box:(默认属性) padding和borde ...
- 如何将一个div盒子水平垂直都居中？
html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...
- position窗口居中
position的四个属性值: relative absolute fixed static 下面分别讲述这四个属性. <div id="parent"> &l ...
- 层模型--绝对定位(position:absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接 ...
- IE6和IE7下绝对定位position：absolute和margin的冲突问题解决
绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...
随机推荐
- jQuery对象与DOM对象及互相转化
<p id=‘’hello”></p> 普通处理,通过标准JavaScript处理: var p = document.getElementById('hello'); p.i ...
- 转换汉子首字母类 CreatChinaSpell
public class CreatChinaSpell { public static string GetChineseFirstChar(string chineseStr) { StringB ...
- WinForm中DataGridView的使用（五） - 自定义列
DataGridView支持指定DataGridViewImageColumn.DataGridViewButtonColumn等特殊类型的列,加入到Columns中. DataGridViewIma ...
- JMeter的使用——ApacheJMeterTemporaryRootCA.crt的用法
在使用JMeter的时候,启动HTTP代理服务器弹出的那个提示框一直不知道是什么意思,刚刚弄明白了,在JMeter2.1之后,通过JMeter的代理服务器来访问https安全连接的网页的时候,浏览器会 ...
- ecliplse启动慢的优化方法（亲测有效）
本人使用的ecliplse IDE 版本是: Version: Photon Release (4.8.0)Build id: 20180619-1200 我的电脑配置是 Ecliplse启动差不多一 ...
- Java面向对象之异常（异常处理方式）
一.基础概念 (1)异常:Java程序在运行时期发生的不正常情况. Java就按照面向对象的思想对不正常情况进行描述和对象的封装. (2)异常问题分类: (Throwable:定义对于问题共性的功能. ...
- I/O(输入/输出)---File类
File:表示文件与目录.用它来对文件或目录进行基本操作,它可以查出文件的基本相关信息,比如:名称.最后的修改日期.文件大小. 使用File类操作文件和目录属性步骤: 1.引入File类 import ...
- LongAdder源码学习
原文链接:https://blog.csdn.net/u011392897/article/details/60480108 LongAdder是jdk8新增的用于并发环境的计数器,目的是为了在高并发 ...
- 跟我一起读postgresql源码(四)——Planer(查询规划模块)(上)
时间一晃周末就过完了,时间过得太快,不由得让人倍加珍惜.时间真是不够用哈~ 好的不废话,这次我们开始看查询规划模块的源码吧. 查询规划部分的在整个查询处理模块应该是在一个非常重要的地位上,这一步直接决 ...
- HTML5+CSS实现三列布局自适应
利用CSS的float属性可以将元素并排,做出三列并排的布局. 如这样的效果 实现的原理:只要将3个元素设置float属性,属性值为left,同时指定不同比例的宽度,及高度. 下面是实现代码 < ...