方法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. React项目中的registerServiceWorker的作用

    在公司的React前端项目中,发现有一个registerServiceWorker.js文件, 很久都没弄明白这个文件是干什么用的,查询了一些资料后,了解了一些 service worker是在后台运 ...

  2. Socket接口原理及用C#语言实现

    首先从原理上解释一下采用Socket接口的网络通讯,这里以最常用的C/S模式作为范例,首先,服务端有一个进程(或多个进程)在指定的端口等待客户来连接,服务程序等待客户的连接信息,一旦连接上之后,就可以 ...

  3. linux-常用命令备注

    //杀掉某个进程-xargs应用 ps aux | grep "udplog.js" | cut -c 9-15 | xargs kill -9 //远程拷贝文件或文件夹 sudo ...

  4. c# 半角转换为全角 判断是否是全角

    #region 半角转换为全角 /// <summary> /// 半角转换为全角 ////转全角的函数(SBC case) ///任意字符串 ///全角空格为12288,半角空格为32 ...

  5. Autofac的Autofac.Core.Activators.Reflection.DefaultConstructorFinder错误解决方案。

    在使用Autofac的时候,不给力,看着例子来的,人家没问题,我就报了Autofac.Core.Activators.Reflection.DefaultConstructorFinder错误. 百般 ...

  6. 可变大小、颜色边框、样式的UISwitch

    1.CHSwitch.h // // 文 件 名:CHSwitch.h // // 版权所有:Copyright © 2018 lelight. All rights reserved. // 创 建 ...

  7. 【转】C#中静态方法和非静态方法的区别

    源地址:https://www.cnblogs.com/amoshu/p/7477757.html 备注:静态方法不需要类的实例化就能调用,因为它是一直保存在内存中,不像非静态方法一样要放在实例化类时 ...

  8. sticky footer布局

    一.什么是sticky footer 在网页设计中,Sticky footers设计是最古老和最常见的效果之一.它可以概括如下:如果页面内容不够长的时候,页脚块粘贴在视窗底部:如果内容足够长时,页脚块 ...

  9. CentOS修改默认yum源为国内yum镜像源

    修改CentOS默认yum源为mirrors.163.com 1.首先备份系统自带yum源配置文件/etc/yum.repos.d/CentOS-Base.repomv /etc/yum.repos. ...

  10. 6、C++共用体

    6.共用体 共用体(union)是一种数据格式,他能够存储不同的数据类型,但只能同时存储其中的一种类型.也就是说,结构可以同时存储int.long和double,共用体只能存储ing.long.dou ...