转载自-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. 高性能消息队列NSQ

    前言 最近我再网上寻找使用golang实现的mq,因为我知道golang一般实现的应用部署起来很方便,所以我就找到了一个叫做nsq的mq,其实它并不能完全称为队列,但是它的轻量和性能的高效,让我真的大 ...

  2. 【带着canvas去流浪（8）】碰撞

    目录 一. canvas的能力 二. 动画框架 三. 在canvas中模拟碰撞 3.1定义小球的属性 3.2 生成新的小球 3.3 帧动画绘制函数step 3.4 定义小球的update方法 3.5 ...

  3. Python：游戏：贪吃蛇原理及代码实现

    一.游戏介绍 贪吃蛇是个非常简单的游戏,适合练手.先来看一下我的游戏截图: 玩法介绍:回车键:开始游戏空格键:暂停 / 继续↑↓←→方向键 或 WSAD 键:控制移动方向. 食物分红.绿.蓝三种,分别 ...

  4. docker run 之后执行多条命令

    执行 ls docker run microsoft/dotnet ls && cd /root 执行 多条使用sh -c命令 在run后面加了一个sh -c命令,后面直接加多条语句即 ...

  5. .net core +codefirst（.net core 基础入门，适合这方面的小白阅读，本文使用mysql或mssql）

    设置为model所在的那一层 前言 .net core mvc和 .net mvc开发很相似,比如 视图-模型-控制器结构.所以.net mvc开发员很容易入手.net core mvc .但是两个又 ...

  6. Java集合类源码解析：Vector

    [学习笔记]转载 Java集合类源码解析:Vector   引言 之前的文章我们学习了一个集合类 ArrayList,今天讲它的一个兄弟 Vector.为什么说是它兄弟呢?因为从容器的构造来说,Vec ...

  7. Dynamics 365-关于Activity定制的一个细节

    有一个需求,是Lead上的activity创建的时候,更新regarding Entity上的某个字段信息.需求很简单,写个plugin,注册到对应activity的create事件上,Over... ...

  8. 智能指针std::unique_ptr

    std::unique_ptr 1.特性 1) 任意时刻只能由一个unique_ptr指向某个对象,指针销毁时,指向的对象也会被删除(通过内置删除器,通过调用析构函数实现删除对象) 2)禁止拷贝和赋值 ...

  9. 数据结构：关键路径，利用DFS遍历每一条关键路径JAVA语言实现

    这是我们学校做的数据结构课设,要求分别输出关键路径,我查遍资料java版的只能找到关键路径,但是无法分别输出关键路径 c++有可以分别输出的,所以在明白思想后自己写了一个java版的 函数带有输入函数 ...

  10. 原 js实现数据持久化

    在写js事件时,常常遇到点击一个事件,然后在若干时间以后需要知道最近一次点击的事件的结点.比如这里: 我点击树节点1,再点击tab2,然后我再来回切换tab,假如最后一次点击tab时在tab2上,这时 ...