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

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. PatentTips - Hamming distance comparison

    BACKGROUND INFORMATION In a typical data processing environment, data may be transmitted in multiple ...

  2. DJANGO中如何用邮箱来登陆？

    就是另一个不同的登陆backend. 而DJANGO会尝不同的方式,哪个成功就用哪个 authentication.py from django.contrib.auth.models import ...

  3. java中static学习总结

    <<java编程思想>>: 1.static方法就是没有this的方法. 2.在static方法内部非静态方法. 3.在没有创建对象的前提下,可以通过类本身来调用static修 ...

  4. java包静态导入，继承

    /** * 静态导入 */package cn.sxt.gao;import cn.sxt.oo.*;//用别的包的类需要导入别的包,表示该包下所有类全部导入import java.util.Date ...

  5. [转]C++回调函数(callback)的使用

    原文地址:http://blog.sina.com.cn/s/blog_6568e7880100p77y.html 什么是回调函数(callback)    模块A有一个函数foo,他向模块B传递fo ...

  6. bridge 上网

    手头有一台机器上有一个虚拟机 虚拟机为桥接 本机为静态IP上网 想让虚拟机上网的方式是 本机不设ip 网卡设置DHCP. 虚拟机设置静态ip

  7. laravel5.5更新到laravel5.7

    为什么要更新呢?因为项目用的第三方后台扩展包,有很些bug,不够完美.想要一个漂亮的后台,那个后台只支持5.7. 然后,我就开始更新框架了. 修改后:"php": "&g ...

  8. IOS开发之block应用

    非常长时间都是在学习各位大神的力作,并汲取了不少养料,在此一并谢过各位大神了. 当然了.好东西是要跟大家一起分享的,近期发现了几个很不错的个人网站,都是介绍IOS开发的.当中有唐巧.破船之长.池建强. ...

  9. 创建.m文件一片空白的错误解决方式

    今天写代码,想继承一个类,突然发现创建的类文件一片空白,如图 之后各种调试发现都解决不了问题,以为是装了xcode6 beta2 版本号的问题,结果发现事实上是我创建错了 我创建的是 watermar ...

  10. sendredirect()和forward()的区别 (转)

    sendRedirect() 和forward()的区别 HttpServletResponse.sendRedirect与RequestDispatcher.forward方法都可以实现获取相应UR ...