转载自-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. eclipse中集成maven

    一.环境 eclipse mar jdk 1.7 apache-maven-3.3.3 注意: 1> eclipse mar 已集成maven插件,我们只需要配置成自己的maven即可,类似ec ...

  2. Centos7下用FastDFS搭建图片服务器

    1.所用到的工具: 1.FastDFS_v5.05.tar 2.fastdfs-nginx-module_v1.16.tar 3.libfastcommonV1.0.7.tar 4.nginx-1.1 ...

  3. 3D GIS 应用开发 —— 基于 Mapbox GL 的实践总结

    最近在折腾的 web 端的可视化项目,由于相关业务的需要,用到了 Mapbox 这一地图开发的神器.在此先奉上一个基于mapbox-gl实现的demo(来源:uber的deck.gl项目): 下面我们 ...

  4. Java：配置环境（Mac）——Eclipse；修改JDK版本后，Eclipse打不开

    1.官网下载 选择一个速度快的镜像 推荐东软这个 2.双击下载的安装包,下一步 其中有一步是选择Eclipse版本,SE选第一个,EE第二个.仔细审题吧. 3.配置JDK 应用.关闭 4.测试:写个H ...

  5. 前端 聊聊Ajax

    转载:关于Ajax的全面总结.

  6. jquery实现静态柱形图（写死的数据，只为系统首页UI更美观）

    这段时间比较空闲,便阅读公司做好的项目的源代码,学习学习同事的开发思路. 在项目中使用图表可以很好地提高人机交互的友好度,开发的时候看到项目的首页有两个很小的柱形图,很漂亮,便找到对应的代码看了看,发 ...

  7. selenium-自动化用例(十一)

    思路 将页面操作与用例case分别封装,编写case时就可以用同一个操作方法对应多个case 如下图: PageGUI:存放页面操作方法,每个页面写一个文件,每个文件中写同一个页面不同的操作,例如检索 ...

  8. 阿里云CentOS安装PostgreSQL

    在PostgreSQL官方文档:https://www.postgresql.org/download/linux/redhat/ 有选项和说明 1.检查有没安装:rpg -ga | grep pos ...

  9. Win 10 和 Ubuntu 16.04 双系统，安装完成后，设置默认的启动项

    当安装好了 Windows 和 Ubuntu 双系统之后,默认的启动项是 Ubuntu,我们可以来设置默认的启动项, 开机时,在启动项选择处,可以通过↑↓ 键来选择启动哪个系统,第一行序号是 0 ,第 ...

  10. LeetCode算法题-Self Dividing Numbers（Java实现）

    这是悦乐书的第305次更新,第324篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第173题(顺位题号是728).自分割数是一个可被其包含的每个数字整除的数字.例如,12 ...