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

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. [K/3Cloud]关于数据库sa密码更改，管理中心登录不上的问题。

    有时候可能应为别的原因可能一不小心更改了数据库的密码,导致K/3 Cloud管理中心和单据打不开. 这个时候其实只要在注册一下就能解决了,在浏览器中输入http://192.168.25.35:800 ...

  2. HDU5266 LCA 树链剖分LCA 线段树

    HDU5266 LCA Description 给一棵 n 个点的树,Q 个询问 [L,R] : 求点 L , 点 L+1 , 点 L+2 -- 点 R 的 LCA. Input 多组数据. The ...

  3. kafka+spark-streaming实时推荐系统性能优化笔记

    1) --conf spark.dynamicAllocation.enabled=false 如果正在使用的是CDH的Spark,修改这个配置为false:开源的Spark版本则默认是false. ...

  4. xcode5下取消ARC

    打开你的工程,点击目录的工程文件,最顶端蓝色的,然后选择project下你的工程,还是蓝色那项,然后build Settings,然后往下拉,在Apple LLVM 5.0 - Language - ...

  5. codevs—— 1077 多源最短路

    1077 多源最短路  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description 已知n个点(n<=100),给你 ...

  6. 模拟赛 Problem 1 高级打字机(type.cpp/c/pas)

    Problem 1 高级打字机(type.cpp/c/pas) [题目描述] 早苗入手了最新的高级打字机.最新款自然有着与以往不同的功能,那就是它具备撤销功能,厉害吧. 请为这种高级打字机设计一个程序 ...

  7. 关于jQuery的append()和prepend()方法的小技巧

    最近工作上有个需求是要求一个自动向上滚动的列表,表有很多行,但只显示一行,每次滚动一行.很简单的一个功能,代码如下 <div class="scroll-area"> ...

  8. Xsolla带你走进印度移动游戏市场

    作为世界上人口第二大国的印度.随着移动时代的到来,越来越多的开发人员将目光瞄准了这个国家.今天Xsolla就带领大家一起来了解这样一个新兴的移动游戏市场. 印度移动市场潜力巨大 作为世界四大宗教和数字 ...

  9. Codeforces Round #119 (Div. 2)A. Cut Ribbon

    A. Cut Ribbon time limit per test 1 second memory limit per test 256 megabytes input standard input ...

  10. 【POJ 3159】 Candies

    [题目链接] 点击打开链接 [算法] 差分约束系统 [代码] #include <algorithm> #include <bitset> #include <cctyp ...