今天又学了一种新方法，其实不算新，只是我不知道而已，想想学了一年多，现在什么动效都能写点出来了，但是一些基础的东西还是掌握不好，所以我现在依然会一遍遍的复习h5和css3，这就是自学的坏处，不知道的东西不知道怎么去学，没有哪个视频或者书讲得很全的，几乎都有知识点没讲，我甚至看见过有几本书有些知识点讲错了（也有可能是我错了），好吧，言归正传，这个方法是定位，一张图片或者div要在一个已知的容器里左右对齐，上下对齐，或者说是居中吧，
第一种方法若使用上一层盒子为参照物，那么应该修改上一层的盒子为当前盒子的高度，然后通过原始高度减去当前高度，则为上一层盒子的上下padding距离
第二种方法若使用当前盒子为参照物，那么则应该修改当前盒子的margin等于上一层盒子减去当前盒子的高度为当前盒子的上下margin距离，上一层盒子的高度不变
这是上下的，左右的也一个道理，已知上一层的容器的宽度以及要操作的元素的宽度，修改上一层的宽度减去当前盒子的宽度，剩下的宽度除以2，这个数值就是当前要操作的盒子的单面margin值，不过这些方法都不利于维护，想要居中两种一起写就ok

div在上一层容器居中的方法的更多相关文章

  1. 让图片在div 中居中的方法

    方法一: 思路:利用text-align属性将图片水平居中,然后设置padding-top的值使其垂直居中. 结构如下: <div> <img src="images/tt ...

  2. 用CSS让DIV上下左右居中的方法

    转载自喜欢JS的无名小站 例如 一个父div(w:100%;h:400px)中有一个子div(w:100px;100px;).让其上下左右居中. 方法一(varticle-align) 理念 利用表格 ...

  3. 小div在大div里面水平垂直都居中的实现方法

    关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...

  4. 纯css使div垂直居中，div垂直，div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  5. 让DIV水平和垂直居中的几种方法

    我们在设计页面的时候,经常要把DIV居中显示,而且是相对页面窗口水平和垂直方向居中显示,如让登录窗口居中显示.我们传统解决的办法是用纯CSS来让DIV居中.在本文中,我将给大家讲述如何用CSS和jQu ...

  6. div在浏览器窗口中居中

    让div相对于浏览器窗口居中. 方案一:纯粹使用CSS实现 <!DOCTYPE html> <html> <head> <meta charset=" ...

  7. 用CSS让网页背景图片居中的方法

    网页背景居中的方法有很多种的.这里介绍一些用CSS让背景图片居中的方法. 让背景图片居中的第一个方法是用像素设定,很多都用这种,但是也是最麻烦的: <div style="width: ...

  8. AngularJS进阶(三十八)上拉加载问题解决方法

    AngularJS上拉加载问题解决方法 项目中始终存在一个问题:当在搜索栏输入关键词后(见图1),按照既定的业务逻辑应该是服务端接收到请求后,首先返回查询的前7条数据,待客户端出现上拉加载时,继续查找 ...

  9. Docker技术入门与实战 第二版-学习笔记-8-网络功能network-1-单个host上的容器网络

    Docker 中的网络功能介绍 Docker 允许通过外部访问容器或容器互联的方式来提供网络服务 1) 外部访问容器 容器中可以运行一些网络应用,要让外部也可以访问这些应用,可以通过 -p或 -P参数 ...

随机推荐

  1. append动态生成的元素，无法触发事件的原因及解决方案

    今天笔者在实现一个简单的动态生成元素功能的时候,发现了一个问题: 使用append动态生成的元素事件绑定失效了. 查阅资料后发现: click(fn)当选中的选择器被点击时触发回调函数fn.只针对与页 ...

  2. maven整合S2SH

    1.pom.xml <?xml version="1.0"?> <project xsi:schemaLocation="http://maven.ap ...

  3. ARM Cortex-M底层技术(3)—编译内核的原理及其应用

    概述: 当前开发中,我使用的Keil开发工具较多(keil526),故以keil为例进行介绍,其他开发环境大同小异. 1. 编译链接的定义 不管我们编写的代码有多么简单,都必须经过「编译 --> ...

  4. k8s手动安装-1

    1.组网master可以使用双网卡,一个外网网卡连接外网,并且做proxy server,一个host-only网卡和node连接. 新版vitualbox配置host-only需要在主机网络管理器中 ...

  5. koa2 进阶网站

    http://www.ruanyifeng.com/blog/2017/08/koa.html  阮一峰 https://www.itying.com/koa/ koa2中文网 https://blo ...

  6. BZOJ 5046 分糖果游戏

    网页崩溃了 心态也崩溃了 MD劳资写了那么多 题意: 有a,b两个人分糖,每个人都有一个能量值.每个人每一轮可以选择进行两种操作: 1.取走最左边的糖果,补充相应的能量值并获取相应的美味度. 2.跳过 ...

  7. Mysqldump导入数据库很慢的解决办法

    https://blog.csdn.net/xizaihui/article/details/53103049 1.MySQLdump导出的SQL语句在导入到其他数据库的时候会相当慢,甚至几十秒才处理 ...

  8. 搭建vue项目并启动vue项目

    链接地址:https://blog.csdn.net/aa792978017/article/details/82939483 Vue.js是现在比较优秀的Web前端框架,下面开始从零开始搭建一个Vu ...

  9. gitHub pull Request记录

    1.fork开源项目到自己的gitHub,点fork,然后clone即可 2.提交本地修改,push到自己的代码库 3.点new pull Request,写点备忘信息 注意确保修改的正确性,如果运行 ...

  10. Access分页语句

    一.双TOP法高效率的Access分页的SQL语句,语法格式: SELECT * FROM (SELECT TOP "&pagesize&" * FROM (SEL ...