方法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 ; 居中的更多相关文章

  1. css绝对定位元素实现居中的几个方法

    一:CSS绝对定位元素left设为50%实现水平居中 绝对定位的元素left设为50%时,是已左上角为原点的,所以只要再使用margin属性添加负值补偿回来即可.示例:[css]代码如下: #boar ...

  2. 让绝对定位的div居中

    最近看到一个问题就是让绝对定位的div居中,在尝试了top:50%:left:50%:后发现,居中是有问题的并不是想象中的样子 需要再加两句margin-top:-盒子高度的一般px  margin- ...

  3. 盒子模型&position定位

    有时候深深的感觉语文这门课程其实很有用, 至少以前学的时候没有感觉到 直到现在阅读大量的别人的资料文章的时候或者是看一些题目....... 总之:认真阅读小心品味 当然,前面的孤言自语和本文无关,只是 ...

  4. position fixed 居中

    1.水平居中.footer { height: 10%; text-align: center; position: relative; left: 50%; transform: translate ...

  5. Css float 盒子模型 position

    属性: float 浮动 浮动的内容用div包起来,给div设置宽高 clear 清除浮动. box-sizing 标准模式下的盒模型 content-box:(默认属性) padding和borde ...

  6. 如何将一个div盒子水平垂直都居中？

    html代码如下: 固定样式: 方法一:利用定位(常用方法,推荐) .parent{ position:relative; } .child{ position:absolute; top:50%; ...

  7. position窗口居中

    position的四个属性值: relative absolute fixed static 下面分别讲述这四个属性. <div id="parent">     &l ...

  8. 层模型--绝对定位(position:absolute)

    如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接 ...

  9. IE6和IE7下绝对定位position：absolute和margin的冲突问题解决

    绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...

随机推荐

  1. vis用于做3D图表的js插件

    vis.js用于做3D图表:(浏览网站需要FQ)实例:http://visjs.org/graph3d_examples.html代码下载:https://github.com/almende/vis

  2. 通达OA整合教程

      资源下载地址: 通达OA 2015:http://pan.baidu.com/s/1qYMxsZU mysql下载:http://pan.baidu.com/s/1c2oVI5y 整合文件:htt ...

  3. easyui-dialog 弹窗

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  4. （转）通过Javascript得到URL中的参数(query string)

    原文地址:http://www.cnblogs.com/season-huang/p/3322561.html 我们知道,"GET"请求中,通常把参数放在URL后面,比如这样htt ...

  5. Sql 查询过慢，尝试重建索引

    DBCC showcontig('Table') DBCC DBREINDEX('Table') 分析表的索引建立情况:DBCC showcontig('Table') DBCC SHOWCONTIG ...

  6. 死磕Java之聊聊LinkedList源码(基于JDK1.8)

    工作快一年了,近期打算研究一下JDK的源码,也就因此有了死磕java系列 LinkedList 是一个继承于AbstractSequentialList的双向链表,链表不需要capacity的设定,它 ...

  7. 浅谈 kubernetes service 那些事（上篇）

    一.问题 首先,我们思考这样一个问题: 访问k8s集群中的pod, 客户端需要知道pod地址,需要感知pod的状态.那如何获取各个pod的地址?若某一node上的pod故障,客户端如何感知? 二.k8 ...

  8. Jmeter_实现Excel文件导出到本地

    一般而言,对于页面的“导出”操作,主要经历如下两个操作:①根据数据库的内容,将文件导出到应用服务器上:②将服务器上的文件下载到本地电脑: Jmeter同LoadRunner类似,只能记录服务端与客户端 ...

  9. oracle调试存储过程不进去

    右击存储过程,选中Add debug information即可

  10. python 安装虚拟环境步骤

    1.python3.6.3 注: 1.安装的时候,装上你的pip 2.安装的时候,把环境变量记得勾选 3.如果你手动更改安装位置,更改到随意的盘根目录下 2.MySQL      pycharm最好安 ...