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

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. Ubuntu 16.04通过Trickle限制某个软件的下载/上传速度

    在Linux下没有Windows使用360那样去限制某个软件的速度. 但是通过Trickle可以设置某个软件的网速,但是前提是通过Trickle命令连带启动这个软件才可以,不能中途去设置. 比如现在很 ...

  2. socket短连接、长连接

    通常短连接是这样:连接->传输数据->关闭连接那什么是长连接?一般长连接相对短连接而言的,长连接在传输结束后不关闭连接,而不断的发送包保持连接等待处理下一个数据包. 一般长连接用于少数cl ...

  3. Intellij IDEA安装插件

    从Eclipse到Intellij IDEA换过来,还是没有适应,并且电脑异常的卡顿,4核4G内存的机器表示伤不起.Intellij IDEA还有待我进行调教. 今天说明一下怎样安装插件.以keyPr ...

  4. 躁动不安的const

    就是用来恐吓你的 我能想到的,最短的.且const最多的一个语句是: int const * fun(int const*const a[],const int index)const; 而这个语句还 ...

  5. jenkins安装和使用

    1 jenkins安装 直接下载deb包,离线安装. 2 plugin的安装 直接下载hpi包,离线安装. 我在一次安装的时候,在配置gitlab时,在test connection的时候,出现了nu ...

  6. 继承自TWinControl的控件不能在设计期间接受子控件，用代码设置子控件却可以（它的自绘是直接改写PaintWindow虚函数，而不是覆盖Paint函数——对TWinControl.WMPaint又有新解了）

    这个控件直接继承自TWinControl,因此不是改写Paint;函数,而是直接改写PaintWindow虚函数,它在VCL框架里被直接调用,直接就把自己画好了(不用走给控件Perform(WM_Pa ...

  7. Redis主节点内存占用过高

    0. 基本情况 Redis采用集群模式,560个主节点,主从比为1:1,单台机器上为16个节点.info memory观察到主节点A单个Redis内存used_memory_rss_human为9.2 ...

  8. linux 网络编程-基础篇01

    #Socket简介 是一个编程接口是一种特殊的文件描述符(everything in Unix is a file)并不仅限于TCPIP协议面向连接(Transmission Control Prot ...

  9. basename与dirname命令解析【转】

    本文转载自:http://blog.csdn.net/choice_jj/article/details/8766335 basename命令 语法:basename string [suffix] ...

  10. loj 102 最小费用流

    补一发费用流的代码 %%%棒神 #include<iostream> #include<cstdio> #include<cstring> #include< ...