转载自-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. Python 包构建教程

    目录 setuptools 和 setup.py 你所需要做的事 & 一些概念 基础概念 关于源码分发文件和二进制分发文件 示例和分发选择 pure python module package ...

  2. 全内存的redis用习惯了？那能突破内存限制类redis产品ssdb呢？

    首先说一下背景,在双十一的时候,我们系统接受X宝的订单推送,同事原先的实现方式是使用redis的List作为推送数据的承载,在非大促的场景下, 一切运行正常,内存占用大概3-4G,机器是16G内存.由 ...

  3. Python 里的「单分派泛函数」到底是什么？

    泛型,如果你学过Java ,应该对它不陌生吧.但你可能不知道在 Python 中(3.4+ ),也可以实现简单的泛型函数. 在Python中只能实现基于单个(第一个)参数的数据类型来选择具体的实现方式 ...

  4. HttpClient封装方法

    //post请求 public static string PostRequest(string url, HttpContent data) { var handler = new HttpClie ...

  5. 关于Exceptionless的使用注意

    大家都应该比较熟悉NLOG,我们知道log4net和nlog,也有其它的记日志框架.目前我们的生产环境使用nlog,而且对Exceptionless的对接也是无缝的.可能有人会问为什么不用ELK,主要 ...

  6. PHP八大设计模式

    设计模式 单例模式解决的是如何在整个项目中创建唯一对象实例的问题,工厂模式解决的是如何不通过new建立实例对象的方法. 单例模式 $_instance必须声明为静态的私有变量 构造函数和析构函数必须声 ...

  7. ubuntu 安装vm-tool

    1.“虚拟机”->“安装vmware tools”VMware tools 2. 新建一个文件夹 ,打开vmware tools安装介质.右键选择vmwaretools的gz压缩包,选择“提取到 ...

  8. es6 generator函数

    es6 新增了Generator函数,一种异步编程的解决方案 回顾一下,es6 提供了新的遍历方法,for of ,适用于各种数据集合,统一了遍历操作,原生支持for of 集合的数据集合有.数组,字 ...

  9. JMeter写入文件

    之前我们推文讨论过如何使用jmeter读取文件, 比如csv, txt文件读取, 只要配置csv数据文件, 即可非常容易的从文件中读取想要的数据,  但是如果数据已经从API或者DB中获取, 想存放到 ...

  10. selenium之元素定位-xpath

    被测试网页的HTML代码 <html> <body> <div id="div1" style="text-align:center&quo ...