盒子绝对定位 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 ...
随机推荐
- Instruments Tutorial for iOS: How To Debug Memory Leaks【转】
If you're new here, you may want to subscribe to my RSS feed or follow me on Twitter. Thanks for vis ...
- 【转】MOCK方法介绍
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://baidutech.blog.51cto.com/4114344/743740 1 ...
- delphi监控文件夹
(****************************************** 文件和目录监控 当磁盘上有文件或目录操作时,产生事件 使用方法: 开始监控: PathWatch(Self.Ha ...
- [.net 多线程 ]ReaderWriterLock
ReaderWriterLock 用于同步对资源的访问.在任一特定时刻,它允许多个线程同时进行读访问,或者允许单个线程进行写访问.在资源不经常发生更改的情况下,ReaderWriterLock 所提供 ...
- rsync实时备份备份服务搭建和使用指南
一.Rsync企业工作场景说明: 1.利用定时任务+rsync方式实现数据同步 对于网站内部技术人员创建的数据,可以采取定时任务的方式 2.利用实时任务+rsync方式实现数据同步 对于网站外部访问用 ...
- linux 改变系统时间
date 查看系统时间 date -s 04/05/16 日期设置成2016年4月5日 date -s 15:03:32 日期设置成2016年4月5日15:03:32 上述两步可以直接写成这样一 ...
- 苹果开发者账号提示“Unable to verify mobile phone number”的解决方案
在注册苹果开发者账号时,会提示:"Unable to verify mobile phone number.".顾名思义,没有有效的手机号码. 解决方案: 进入到Your Appl ...
- java 笔记整理
在19寒假对java基础进行自学,总结的笔记整理出来 ==================================================== 排序查找 冒泡排序法1.一共会比较数组元 ...
- 深度学习之 TensorFlow（五）：mnist 的 Alexnet 实现
尝试用 Alexnet 来构建一个网络模型,并使用 mnist 数据查看训练结果. 我们将代码实现分为三个过程,加载数据.定义网络模型.训练数据和评估模型. 实现代码如下: #-*- coding:u ...
- form表单提交回调函数
form表单没有回调函数,不过可以通过jquery-form.js这个插件来实现回调函数: <form id="addform" class="form-horiz ...