盒子绝对定位 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 ...
随机推荐
- 黑盒测试实践-小组任务分配和安排-Day01
实践作业2:黑盒测试实践 小组成员 组长:华同学 成员:覃同学.沈同学.刘同学.郭同学.穆同学 任务分解 任务1:分析系统需求 参考软件需求规格说明书模板描述系统需求.如果系统功能特别多,特别复杂,则 ...
- javascript总结8:JavaScript 类型转换
1 JavaScript 数据类型转换 1.1 数字类型转字符串 n1 = 10;var n2 =String(n1); 或者 var n3 = n1.toString(n1); 1.2 字符串转数字 ...
- Unity破解不成功解决方案
你是不是遇到过Unity新版本出来的时候就急着使用,但是安装好了,却破解不成功的问题(你之前的版本破解过).这是由于你的注册表没有彻底的删除,接下来我们图解如何清理. 1.卸载以前的版本,卸载完了删除 ...
- 生成MySql数据库的数据字典代码参考
Code: /** * 生成mysql数据字典 */ //配置数据库 $dbserver = "127.0.0.1"; $dbusername = "root" ...
- arp欺骗进行流量截获-1
这边博文主要讲一下怎么使用arp欺骗进行流量截获,主要用于已经攻入内网以后,进行流量监听以及修改. 一.什么是arp arp协议是以太网的基础工作协议,其主要作用是是一种将IP地址转化成物理地 ...
- Ubuntu chmod 命令可以用来修改文件或文件夹的读写权限
chmod 命令有两种使用方式 —————————————————————————— (1)chmod [ u / g / o / a ] [ + / - / = ] [ r / w / x ] fi ...
- git Problem with the SSL CA cert (path? access rights?)
问题: [root@localhost opt]# git clone https://github.com/docker/docker.git 正克隆到 'docker'...fatal: unab ...
- golang并发练习代码笔记
golang语言的精髓就是它的并发机制,十分简单,并且极少数在语言层面实现并发机制的语言,golang被成为网络时代的c语言,golang的缔造者也有c语言的缔造者,Go语言是google 推出的一门 ...
- 金庸笔下的"程序员" | 附金庸武侠全集
金庸 飞雪连天射白鹿,笑书神侠倚碧鸳当您八十高龄取得牛津大学唐朝史学博士学位,我还以为这是另一部史诗开始的信号,然而没有后续了.我的高中到大学,是十遍<笑傲江湖>的距离,我的整个青春,是大 ...
- 【bzoj4869】[Shoi2017]相逢是问候 线段树+扩展欧拉定理
Description Informatikverbindetdichundmich. 信息将你我连结.B君希望以维护一个长度为n的数组,这个数组的下标为从1到n的正整数.一共有m个操作,可以 分为两 ...