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

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. 加壳学习笔记(三)-简单的脱壳思路&amp;调试思路

    首先一些windows的经常使用API:   GetWindowTextA:以ASCII的形式的输入框   GetWindowTextW:以Unicaode宽字符的输入框   GetDlgItemTe ...

  2. C++学习之new与delete、malloc与free

    在C/C++的面试时,对于new/delete和malloc/free这两对的使用和区别经常被考查到,如果这种基础的问题都答不上来,估计很难过面试了.这篇文章仅仅是浅显的讲一下,仅供参考. 一.new ...

  3. MAC Wireshark抓包IOS

    网络抓包是个基础技能,对于网络协议的掌握有一定的要求.iOS上实现网络抓包可以用Charles(针对http和https),tcpdump(快速分析网络包),和Wireshare.之前写过一篇介绍tc ...

  4. 22、Cocos2dx 3.0游戏开发找小三之音乐与音效：假如世界上没有了音乐，你的耳朵会孤单吗？

    重开发人员的劳动成果,转载的时候请务必注明出处:http://blog.csdn.net/haomengzhu/article/details/30485103 假如世界上没有了音乐,在森林里.我们听 ...

  5. SNMP安全配置的两种方法(也可同一时候兼顾配置两种方法)

    方法一(最简单安装): 安装 Net-SNMP CentOS及其他RedHat系列产品提供了net-snmp的二进制包.我们能够直接从源里安装. shell> yum install net-s ...

  6. oop_day06_抽象类、接口_20150814

    oop_day06_抽象类.接口_20150814 1.static final常量: 1)必须声明同一时候初始化.不能改动,类名点来訪问 2)常量名建议全部字母都大写 3)编译器编译时会直接替换为详 ...

  7. LeetCode 941. Valid Mountain Array (有效的山脉数组)

    题目标签:Array 题目给了一组int array A,让我们判断它是否是 一个山脉数组. 山脉数组一定要有一个最高值,然后要同时有 山坡和下坡. 想法是,从左边开始依次比较两个数字,int[0] ...

  8. SQL语句多表连接查询语法

    一.外连接 1.左连接  left join 或 left outer join SQL语句:select * from student left join score on student.Num= ...

  9. 20170623_oracle基础知识_常见问题

    1 如何配置网络服务?两种连接 Oracle 工具? 1) 打开Net Manager 2) 选择服务命名,点击“+ ”号 3 ) 网络服务名:  remote协议:tcp/ip 主机名:ip地址 端 ...

  10. SignalR -- server push 利器

    实际上关于SignalR的介绍网上有很多,这里不做过多赘述,我们来看下官方网站的描述. [摘录自http://signalr.net/] What is ASP.NET SignalR ASP.NET ...