方法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. VC中多线程(一)Win32 API对多线程编程的支持

    http://blog.sina.com.cn/s/blog_4ae08ad801008yer.html

  2. Monkey稳定性测试环境搭建说明

    一.安装Java环境 安装Java环境-JDK:下载地址:http://pan.baidu.com/s/1pJ6Yqs7,jdk安装解压即可. 二.设置环境变量 双击下载的JDK ,设置安装路径.这里 ...

  3. sql2008调试存储过程

    拿上篇存储过程为例: 在意个窗口里面写上exec Proc_MoveUpOrDown2 'id',3,1,'tableName,'orderid' 按F11,有个黄色的箭头会指向该行, 再按F11会跳 ...

  4. 迷宫救人——DFS小题

    原创 题目大意:人质被困在迷宫之中,要求你寻找一条最短路径快速找到人质. 如图,人质在黄色点2处,营救者在起点红色处,1表示无法通过的障碍点,寻找一条最短路径快速找到人质. 毫无疑问用DFS,遍历4个 ...

  5. Long-Polling, Websockets, SSE(Server-Sent Event), WebRTC 之间的区别与使用

    1.首先看下最简单的SSE: 只用支持SSE的浏览器(大部分)即可,浏览器内置EventSource对象,该对象默认隔三秒刷新一下response的数据. HTML代码(取自w3cschool): & ...

  6. 关于对SwfUpload的改造

    Swfupload 在普通上传下,对于IE chrome firefox等有很好的兼容性. 但一旦与其他控件组合,很容易出现无法上传,帮顶事件丢失的情况. 例如Layer与Swfupload,上传一个 ...

  7. 使用 Windows Phone 8 文件和 URI 关联的自动启动应用

    更详细,猛撸这里:http://msdn.microsoft.com/zh-cn/library/windowsphone/develop/jj206987(v=vs.105).aspx 在WMApp ...

  8. 【SQL】- 基础知识梳理（二） - SQL简介

    一.引言 在梳理这些知识之前,说实话,如果有人问我SQL是什么?我可能会回答就是“INSERT,DELETE,UPDATE,SELECT”语句呗,还能是啥. 二.SQL概念 SQL是什么? SQL是S ...

  9. go tcp使用

    TCP clientThere have been countless times during penetration tests that I've neededto whip up a TCP ...

  10. { "result": null, "log_id": 304592860300941982, "error_msg": "image check fail", "cached": 0, "error_code": 222203, "timestamp": 1556030094 }

    这个是人脸识别时无法检测到图片报的错,有时候我们检测一张图片是否在库里面,当一张图片明显在里面,还检测不到,如下面是我的代码 package Test1; import java.io.IOExcep ...