方法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. oracle数据库数据类型和约束

    今天为大家分享一下关键数据库里面的数据类型和约束.我们都知道国家要讲法律,干什么事情都要遵守法律,比如小的时候你上学的时候要遵守课堂纪律.不能迟到和早退,同样的我们在数据库中创建一些表.或者查询一些表 ...

  2. Fiddler 教程之：Fiddler捕获会话

    1 Fiddler的工作原理 Fiddler 是以代理web服务器的形式工作的,它使用代理地址:127.0.0.1,端口:8888.当Fiddler退出的时候它会自动注销,这样就不会影响别的程序.不过 ...

  3. 解决linux下80端口占用问题

    在即安装有tomcat,又安装有nginx的服务器上(典型阿里云驻云java镜像),系统默认配置nginx占用80端口,tomcat占用8080端口. 如果想要便于用户可以直接通过IP或者域名访问到t ...

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

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

  5. C#多线程编程实战1.3等待线程

    using System;using System.Collections.Generic;using System.Linq;using System.Text;using System.Threa ...

  6. 通过 js 修改 html 的文本内容或者样式

    通过 js 修改 html 的文本内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8&quo ...

  7. Django 使用第三方服务发送电子邮件

    在 Django 网站中使用 mailgun 的邮件收发服务. 1.在 mailgun 官网上注册个账号(免费,免费账号每个月有10000条收发邮件的服务,对我来说已经完全够用了),注册完成后界面如图 ...

  8. luoguP3648 [APIO2014]序列分割

    https://www.luogu.org/problemnew/show/P3648 同bzoj3675 这题斜率优化+滚动数组就可以了qwq 因为我是在飞机上瞎bb的式子,所以可能会和别的题解的式 ...

  9. 宽带、ADSL、以太网、PPPoE

    作者:北极链接:https://www.zhihu.com/question/25847423/answer/31563282来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出 ...

  10. Android Studio for windows环境搭建

    Android Studio环境搭建 个人博客 欢迎大家多多关注该独立博客:   csdn博客  一直想把自己的经验分享出来,记得上次写博客还是ok6410的笔记,感觉时代久远啊.记得那个时候我还一心 ...