原始（未居中）：

  1.  .con{
  2.    width:200px;
  3.    height:200px;
  4.    background:#ccc;
  5.    position:relative;
  6.  }
  7.  .abs{
  8.    width:40px;
  9.    height:20px;
  10.    background:steelblue;
  11.    position:absolute;
  12.    bottom:;
  13.  }
  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.    <meta charset="utf-8">
  5.    <meta name="viewport" content="width=device-width">
  6.    <title>JS Bin</title>
  7.  </head>
  8.  <body>
  9.  <div class="con">
  10.    <div class="abs"></div>
  11.  </div>
  12.  </body>
  13.  </html>

Solution 1：

给absolute元素的left设为50%, margin-left设为absolute元素宽度一半的负数

  1.  .con{
  2.    width:200px;
  3.    height:200px;
  4.    background:#ccc;
  5.    position:relative;
  6.  }
  7.  .abs{
  8.    width:40px;
  9.    height:20px;
  10.    background:steelblue;
  11.    position:absolute;
  12.    bottom:;
  13.  
  14.    left:50%;
  15.    margin-left:-20px;
  16.  }

Solution 2：

原理和1相似，设left：50%，但使用css3的transform：translate(x,y);

  1.  .con{
  2.    width:200px;
  3.    height:200px;
  4.    background:#ccc;
  5.    position:relative;
  6.  }
  7.  .abs{
  8.    width:40px;
  9.    height:20px;
  10.    background:steelblue;
  11.    position:absolute;
  12.    bottom:;
  13.  
  14.    left:50%;
  15.    transform:translate(-50%);
  16.  }

Solution 3：

margin:auto;实现居中,但是absolute元素一定要有宽度，并且如果宽度不合适（常见于ul li）也是不会居中的

  1.  .con{
  2.    width:200px;
  3.    height:200px;
  4.    background:#ccc;
  5.    position:relative;
  6.  }
  7.  .abs{
  8.    width:40px;
  9.    height:20px;
  10.    background:steelblue;
  11.    position:absolute;
  12.    bottom:;
  13.    left:;
  14.    right:;
  15.    margin:0 auto;
  16.  }

absolute元素水平居中的更多相关文章

  1. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  2. CSS/CSS3 如何实现元素水平居中

    更新:可直接访问 [CSS/CSS3 如何实现元素水平居中] 查看效果,右键查看源代码 -------------------------------------------------分割线---- ...

  3. position: absolute;绝对定位水平居中问题

    position: absolute;绝对定位水平居中问题 用CSS让元素居中显示并不是件很简单的事情—同样的合法CSS居中设置在不同浏览器中的表现行为却各有千秋.让我们先来看一下CSS中常见的几种让 ...

  4. absolute元素 text-align属性

    text-align属性的元素可以有效作用于inline/inline-block水平的子元素,但是,text-align属性对应用了position:absloute/fixed声明的元素无效!   ...

  5. css点滴2—六种方式实现元素水平居中

    本文参考文章<六种方式实现元素水平居中> 元素水平居中的方法,最常见的莫过于给元素一个显式的宽度,然后加上margin的左右值为auto.这种方式给固定宽度的元素设置居中是最方便不过的.但 ...

  6. 【css系列】六种实现元素水平居中方法

    一.前言 居中效果在CSS中很是普通的效果,平时大家所看到的居中效果主要分为三大类:水平居中.垂直居中和水平垂直居中.而其中水平居中相对于后两者来说要简单得多.使用了css3的flexbox的属性轻松 ...

  7. CSS布局：元素水平居中

    CSS布局之元素水平居中 本文将依次介绍在不同条件下实现水平居中多种方法 一.使用 text-align: center : 适用于块级元素内部的行内元素水平居中(也适用于图片的水平居中) 此方法对i ...

  8. css让浮动元素水平居中

    对于定宽的非浮动元素我们可以用 margin:0 auto; 进行水平居中. 对于不定宽的浮动元素我们也有一个常用的技巧解决它的水平居中问题.如下: HTML 代码: <div class=&q ...

  9. 祖先元素transform非none时在Iphone6上引起后代fixed/absolute元素的怪异表现及解决方案

    如题,祖先元素transform非none时,记录一下Iphone6中引起后代元素fixed参考视图怪异表现和解决方案. 层叠关系及参考视图 层叠上下文是HTML元素的三维概念,这些HTML元素在一条 ...

随机推荐

  1. jquery全选,取消全选

    近期项目又用到了这个全选和取消全选的操作. 曾经总是自己写纯JS.如今既然知道怎么写了.那怎样用JQ写得更简洁呢.这样也能学到新的东西.假设乎百度一下果然发现了好东东.感谢OSC的iuhoay. 代码 ...

  2. IDEA--java版本修改（jdk1.8改成jdk1.7）

    转载:https://blog.csdn.net/huyishero/article/details/61916516

  3. centos6.5 yum安装MySQL5.6

    创建MySQL用户 #useradd mysql #passwd mysql #chmod u+w /etc/sudoers #vi /etc/sudoers mysql ALL=(ALL) ALL ...

  4. Linux文件锁【转】

    本文转载自:http://blog.csdn.net/dragon_li_chen/article/details/17147911 一.文件锁的分类: 翻阅参考资料,你会发现文件锁可以进行很多的分类 ...

  5. UltraEdit mac破解版

    2018-01-17 增加18.00.0.19破解 去官网下载原载,先运行一次,再在终端里执行下面代码就可以破解完成! printf '\x31\xC0\xFF\xC0\xC3\x90' | dd s ...

  6. 唯一性校验 impl 和 action

    IMPL方法实现 //  这个方法是通过ID修改数据 如果得到结果大于0 表明结果有重复 如果得到结果小于0 表明结果正确 @Override public boolean checkVersion( ...

  7. 并不对劲的noip2018

    day1 road 题意 有n(\(n \leq 10^5\))个数\(a_1,a_2,...,a_n\)排成一排,每次可以选择一段大于零的数减一,问最少几次把所有数减为0. 题解 先想到一个简单的策 ...

  8. AutoIT: 对数据库的访问，数据提取操作

    #include<array.au3> $conn= ObjCreate("ADODB.Connection") $RS= ObjCreate("ADODB. ...

  9. 基于 IOCP 的通用异步 Windows Socket TCP 高性能服务端组件的设计与实现

    设计概述 服务端通信组件的设计是一项非常严谨的工作,其中性能.伸缩性和稳定性是必须考虑的硬性质量指标,若要把组件设计为通用组件提供给多种已知或未知的上层应用使用,则设计的难度更会大大增加,通用性.可用 ...

  10. python3中digest()和hexdigest()区别

    hashlib是涉及安全散列和消息摘要,提供多个不同的加密算法接口,如SHA1.SHA224.SHA256.SHA384.SHA512.MD5等. 其中 hash.digest() 返回摘要,作为二进 ...