转载自-CSS居中绝对https://www.cnblogs.com/skura23/p/6530556.html

作者:PajamaCat

1，div宽度未知1

<body>

  <div style="position: absolute; left: 50%;">

    <div style="position: relative; left: -50%; border: dotted red 1px;">

      没有宽度<br />

      照样居中，嘿嘿嘿

    </div>

  </div>

</body>

demo：https://jsfiddle.net/skura23/0123wmsg/

2，div宽度未知2

<div class="outer">

    <div class="inner">居中<br/>蓄力中</div>

</div>

.outer {

    position: relative; /* or absolute */

    /* unnecessary styling properties */

    margin: 5%;

    width: 80%;

    height: 500px;

    border: 1px solid red;

}

.inner {

    position: absolute;

    left: 50%;

    top: 50%;

    transform: translate(-50%, -50%);

    /* unnecessary styling properties */

    max-width: 50%;

    text-align: center;

    border: 1px solid blue;

}

demo：http://jsfiddle.net/skura23/6xo11zwv/210/

ps：此方法适合ie8以上的浏览器

3，div宽度已知

<body>

  <div>

    <div id="content">

      居中蓄力中

    </div>

  </div>

</body>

#content {

  position: absolute;

  left: 0;

  right: 0;

  margin-left: auto;

  margin-right: auto;

  width: 100px; /* 要设定宽度 */

}

CSS绝对定位元素居中的几种方法的更多相关文章

  1. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  2. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

  3. css中元素水平垂直居中4种方法介绍

    table-cell轻松设置文本图片水平垂直居中 让一个元素垂直居中的思路:把这个元素的容器设置为table-cell,也就是具有表格单元格的特性,再使用vertical-align(这个属性对blo ...

  4. 【前端】使用CSS使元素居中的几种方式

    Precondition: <div class="parent"> <div class="item">居中</div> ...

  5. css一个元素垂直居中的6种方法

    方法一: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  6. 元素居中的两种方法，transform和margin

    1.transform :translate(-50%,-50%) <!DOCTYPE html> <html lang="en"> <head> ...

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

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

  8. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  9. css实现垂直水平居中的5种方法

    css实现垂直水平居中的5种方法 给父元素设置table-cell,text-align,vertical-align #big{ width: 200px; height: 200px; borde ...

随机推荐

  1. ftp上传与下载文件

    准备工作 服务器已经配置好ftp服务 服务器linux centos 7.4 搭建ftp服务器:https://www.cnblogs.com/mmzs/p/10601683.html 需要用到的ja ...

  2. 2016年第七届蓝桥杯javaB组 试题 答案 解析

    1.煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形), 第四层10个(排列成三角形), .... 如果一共有100层,共有多少个煤 ...

  3. Spring（三）使用JdbcTemplate对象完成查询

    查询银行账户的数量 1.建立一个项目导入jar包(ioc aop dao 连接池 数据库驱动 ),拷贝容器对应的配置文件到src下 2.在配置文件中开启组件扫描 3.写一个DAO接口定义一个查询方法 ...

  4. java：编程比赛中有用的方法整理（一）数组

    我曾经参加过几次编程比赛,但是当时用的是c语言,现在学习了java,打算专攻java组,故以此整理. 数组无论在哪里都必不可少. 一.数组的拷贝: 使用Arrays类的copyOf方法: 1.将一个数 ...

  5. Invalid Host header

    这个主要是自己遇到很多次了,每次都去网上查改哪里,这次记到自己这里吧,以后把遇到的vue工具的一些问题都整理到这里 在vue中开发的项目有时候需要到手机上看效果,但是你配好本地端口之后,会出现访问内容 ...

  6. C语言货架01

    教材: < C程序设计(第四版) >  谭浩强著    清华大学出版社 教材目录 第1章     程序设计和C语言 第2章     算法——程序的灵魂 第3章     最简单的C程序设计— ...

  7. SQL Server含逗号分隔的数据匹配维表

    日常有时候导出数据需求时,数据列会遇到带有分隔符的ID,但又需要匹配维表(如下图所示)将ID变成名称. 这种情况可以采用“分隔-匹配-合并”的方法 具体代码为: -- 准备工作1:创建事实表数据 CR ...

  8. go打造以太坊合约测试框架

    传送门: 柏链项目学院 1 以太坊智能合约编译 以太坊智能合约编写使用solidity语言,一般情况下我们会在remix环境下进行编译测试,在线环境相对比较稳定.如果不想用在线环境,那我们就需要自己动 ...

  9. ChromeDriver截图

    一.NuGet安装Selenium.Chrome.WebDriver和Selenium.WebDriver 二.将packages\Selenium.Chrome.WebDriver.2.45\dri ...

  10. ORM（二）常用字段小记

    常用字段类型: AutoField:字段自增,多用于ID主键字段,每个表中只能有一个AutoField字段类型. id = models.AutoField(primary_key=True) # 设 ...