嵌套中个的子盒子使用了绝对定位，父盒子使用了相对定位。那么子盒子如何居中显示：

1、距离左偏离50%

2、margin-right子盒子宽度的一半

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8" />

    <title></title>

    <style>

        .box1 {

            height: 200px;

            background-color: aliceblue;

            position: relative;

        }

        .box2 {

            width: 900px;

            height: 40px;

            background-color: red;

            position: absolute;

            bottom:0px;

            left: 50%;

            margin-left: -450px;

        }

    </style>

</head>

<body>

    <div class="box1">

        <div class="box2"></div>

    </div>

</body>

</html>

效果：

CSS——盒子居中显示的更多相关文章

  1. CSS文本居中显示

    因为一直为元素居中问题而困扰,所以决定把自己遇到和看到的方法记录下来,以便以后查看 如果要让inline或inline-block元素居中显示,则父元素css中包含text-align:center; ...

  2. css盒子居中

    方法1(margin: 0 auto)<!DOCTYPE html> <html lang="en"> <head> <meta char ...

  3. css div居中显示的4种写法

    Demo:http://www.feman.cn/h5/center.html .absolute 绝对定位 这是我们最常用的一种居中定位写法 要求必须确定div的宽高度 目前市面上的浏览器基本上都支 ...

  4. css盒子居中定位问题

    在HTML中,div盒子的居中要通过外边距margin和width来控制,首先确定盒子的宽度,然后确定盒子方位并将其平移便可使盒子移到固定位置. <div id="divpic&quo ...

  5. CSS盒子居中的常用的几种方法

    第一种: 用css的position属性 <style type="text/css"> .div1 { width: 100px; height: 100px; bo ...

  6. CSS.05 -- 规避脱标 定位的盒子居中、CSS标签规范、溢出隐藏、内容移除（网页优化）、CSS精灵图

    规避脱标   定位的盒子居中显示 Margin:0 auto : 只能让标准流的盒子居中对齐 当A是B的父系,B可以使用 margin-left:auto: 来获得相当于定位right:0:的效果 M ...

  7. CSS基础之居中显示

    这些天忙完了一些项目后,终于有时间来总结一下了.自己就把做项目过程中的体会和理解到的一些东西和大家分享一下.有错请指正!! 在css中,元素居中显示,是基础也是一个小难点.我们经常不知为何总是不能把元 ...

  8. css 图片内容在不同分辨率下居中显示(演示的图片宽度是1920px，当图片宽度大于显示屏的宽度时)

    1.img 图片内容在不同分辨率下居中显示(如果隐藏多余,在img外面套一个div  设定overflow: hidden.div的大小就是img显示区域的大小) <!DOCTYPE html& ...

  9. CSS盒子模型中（）是透明的，这部分可以显示背景()

    CSS盒子模型中()是透明的,这部分可以显示背景() border margin padding content 我的理解: ·       Margin(外边距) - 清除边框外的区域,外边距是透明 ...

随机推荐

  1. 免XML的SpringMVC配置

    Servlet 3.0以后,新增了一些注解,使得web.xml可以省略掉.这样配合Spring的JavaConfig就可以实现免xml的项目配置,这里简单搭建一个免XML的SpringMVC.Spri ...

  2. 20181010关于pt-kill自动杀死运行超长的进程

    转自: http://blog.chinaunix.net/uid-16844903-id-4442030.htmlhttp://blog.chinaunix.net/uid-31396856-id- ...

  3. spring-cloud-starter-hystrix（断路器）服务不通或者调用失败后的错误处理和回调

    雪崩效应 在微服务架构中通常会有多个服务层调用,大量的微服务通过网络进行通信,从而支撑起整个系统.各个微服务之间也难免存在大量的依赖关系.然而任何服务都不是100%可用的,网络往往也是脆弱的,所以难免 ...

  4. Ubuntu 16.04安装Bless十六进制编辑器

    一款专注于十六进制的编辑器. 安装: sudo apt-get install bless 启动:

  5. 【CV论文阅读】Two stream convolutional Networks for action recognition in Vedios

    论文的三个贡献 (1)提出了two-stream结构的CNN,由空间和时间两个维度的网络组成. (2)使用多帧的密集光流场作为训练输入,可以提取动作的信息. (3)利用了多任务训练的方法把两个数据集联 ...

  6. Java入门 第二季第三章 继承

    这是我学习慕课网Java课程的笔记,原视频链接为:http://www.imooc.com/learn/124 3-1 Java 中的继承  ★ 概念:继承是类与类的一种关系,是一种 "is ...

  7. ArcGIS Runtime SDK for iOS中获取ImageServiceLayer的栅格值

    本文原创,转载请注明原创地址 http://blog.csdn.net/dongyu1009/article/details/37697389 用AGSImageServiceIdentifyTask ...

  8. BestCoder Round #60/HDU 5505 暴力数学

    GT and numbers 问题描述 给出两个数NN和MM. NN每次可以乘上一个自己的因数变成新的NN. 求最初的NN到MM至少需要几步. 如果永远也到不了输出-1−1. 输入描述 第一行读入一个 ...

  9. 关于linux的用户

    1 linux支持多个用户 2 每个登陆用户有自己的shell,自己的home目录 3 可以将用户分组 4 用户对文件有各自的权限,从而将用户分割 5 用户对应属于它的一批进程 6 可以执行addus ...

  10. iOS-获取子视图父控制器

    开发中有的时候需要涉及当前视图的父级视图,可以通过UIResponder来获取,有两种实现方式: UIView *next=sender; while ([next superview]) { nex ...