今天又学了一种新方法，其实不算新，只是我不知道而已，想想学了一年多，现在什么动效都能写点出来了，但是一些基础的东西还是掌握不好，所以我现在依然会一遍遍的复习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. python在类中使用__slot__属性

    在类中定义__slot__属性来限制实例的属性字段,在创建大量对象的场合可以减少内存占用. 创建大量对象是内存占用对比: 类中不使用__slot__ class MySlot:def __init__ ...

  2. Linux性能优化从入门到实战：07 CPU篇：CPU性能优化方法

    性能优化方法论   动手优化性能之前,需要明确以下三个问题:   (1)如何评估性能优化的效果? 确定性能的量化指标.测试优化前的性能指标.测试优化后的性能指标.   量化指标的选择.至少要从应用程序 ...

  3. Swagger详解（SpringBoot+Swagger集成）(转)

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/ai_miracle/article/de ...

  4. (NOIP)CSP-S 2019前计划

    前言 无 1.NOIP原题板刷 NOIP原题板刷 这是一篇咕了的blog 2.牛客 & ACwing & 洛谷 网课学习 收获还是蛮大的,不过我没有写博客 3.codeforces专项 ...

  5. python NameError: name 'file' is not defined

    import sys import time import os poem='''\ 测试读写文件 ''' print(os.getcwd()) f=file(os.getcwd()+'/python ...

  6. spring mvc和spring boot的区别

    spring boot只是一个配置工具,整合工具,辅助工具. springmvc是框架,项目中实际运行的代码 Spring 框架就像一个家族,有众多衍生产品例如 boot.security.jpa等等 ...

  7. LeetCode--044--通配符匹配（java）*

    给定一个字符串 (s) 和一个字符模式 (p) ,实现一个支持 '?' 和 '*' 的通配符匹配. '?' 可以匹配任何单个字符. '*' 可以匹配任意字符串(包括空字符串). 两个字符串完全匹配才算 ...

  8. Flask学习笔记01之环境搭建

    使用pycharm搭建Flask运行环境 1. 打开pycharm ,创建一个新的工程 2. 选择创建Flask项目 3. Flask项目创建成功,结构如下 4. 运行项目 5. 发送请求 over!

  9. CSS中属性百分比的基准点

    1.属性百分比的基准点 1.1.基于包含块 以下的关于包含块(含块)的概念,不能简单地理解成是父元素. 如果是静态定位和相对定位,包含块一般就是其父元素.但是对于绝对定位的元素,包含块应该是离它最近的 ...

  10. [USACO10MAR]伟大的奶牛聚集Great Cow Gat… ($dfs$,树的遍历)

    题目链接 Solution 辣鸡题...因为一个函数名看了我贼久. 思路很简单,可以先随便指定一个根,然后考虑换根的变化. 每一次把根从 \(x\) 换成 \(x\) 的一个子节点 \(y\),记录一 ...