方法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. mybatis 获得一个map的返回集合

    在使用mybatis 查询结果集,有时会有需求返回一个map比如表 id username 1  name1 2 name2 3 name3 希望的查询结果是一个map 并且以id为key  表为实体 ...

  2. VIVADO生成MCS

    tcl console里面执行 write_cfgmem -format mcs -interface spix4 -size 128 -loadbit "up 0 E:/x.bit&quo ...

  3. oracle 中用法dual

    dual是一个虚拟表,用来构成select的语法规则,oracle保证dual里面永远只有一条记录.我们可以用它来做很多事情. dual是一个虚拟表,用来构成select的语法规则,oracle保证d ...

  4. 【转】Android ActionBar完全解析，使用官方推荐的最佳导航栏(上)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/18234477 本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工 ...

  5. ComicEnhancerPro 系列教程二十：用“文件比较”看有损、无损

    作者:马健邮箱:stronghorse_mj@hotmail.com 主页:http://www.comicer.com/stronghorse/ 发布:2017.07.23 教程二十:用“文件比较” ...

  6. 动态往 datagridview 追加行、列操作

    DataGridViewTextBoxColumn acCode = new DataGridViewTextBoxColumn(); acCode.Name = "acCode" ...

  7. 关于MultiDataTrigger和MultiTrigger的一些注意事项

    他俩有着相同的语法. 都是在conditions中编写触发条件. 因为都是同一个触发类. 在conditions中有Property和Binding这两个属性.那么这两个可以同时使用吗?当然是不可以的 ...

  8. Intellij IDEA神器那些让人爱不释手的小技巧

      完整的IDEA使用教程,GitHub地址: https://github.com/judasn/IntelliJ-IDEA-Tutorial 概述 之前写了一篇介绍IntellIJ IDEA的文章 ...

  9. MongoDB 副本集配置，开启账号认证

    MongoDB 自带功能强大的主从,配置也很简单,从零开始花了30分钟搞定 3台以上机器IP: 192.168.1.24, 192.168.1.25, 192.168.1.26, 192.168.1. ...

  10. UML之类图详解

    原文链接:https://www.cnblogs.com/xsyblogs/p/3404202.html 我们通过一个示例来了解UML类图的基本语法结构.画UML类图其实有专业的工具,像常用的Visi ...