前言

用思维导图的方式简单总结一下各种元素的居中方法，如下图：

补充一下：

    1. table自带功能

    2. 100% 高度的 afrer before 加上 inline block
      优化

    3. div 装成 table

    4. margin-top -50%

    5. translate -50%

    6. absolute margin auto

    7. flex

CSS中元素各种居中方法（思维导图）的更多相关文章

  1. jQuery中的DOM操作《思维导图》

    首先,是关于jQuery中的DOM操作的<思维导图>,请点击这里:jQuery中的DOM操作 列表框的左右选项移动 <html> <head> <title& ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. Array的内置方法思维导图整理（JavaScript）

    按照MDN整理的数组部分的思维导图,主要目的是方便查漏补缺,所以写的不是很详细.

  4. CSS中的各种居中方法总结

    CSS中的居中可分为水平居中和垂直居中.水平居中分为行内元素居中和块状元素居中两种情况,而块状元素又分为定宽块状元素居中和不定宽块状元素居中.下面详细介绍这几种情况. 一.水平居中 1.行内元素居中 ...

  5. 【面试问题】——秋招面试中遇到的一些问题&思维导图&反思

    前言:秋招也跑了挺多的公司,虽然都是招Web前端,但是不同的公司,因为需求和目的不同,面试的考察点也是各不相同.我没有实习经验,只有自己学东学西比较杂也比较浅的一些知识积累可以用,这个过程我发现了自己 ...

  6. HTML+CSS基础知识点简要汇总（思维导图）

  7. jQuery中的DOM操作<思维导图>

    DOM是Document Object Model的缩写,意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口.使用该接口可以轻松地访问页面中所有的标准组件.简单来说,DOM解决了Netsc ...

  8. 在为知笔记中使用Markdown和思维导图

    为知笔记Wiz是一款很好的网摘和笔记工具,作为为知的忠实用户,我在为知收费后第一时间就购买了两年的授权,毕竟这么多年积累的资料都在为知上,我也习惯了使用Wiz来做些工作相关的笔记.为知笔记自带Mark ...

  9. jQuery中的Ajax应用<思维导图>

    传统的WEB应用程序模型是这样工作的:当用户的界面操作触发HTTP请求,服务器在接到请求后进行一些业务逻辑处理,如保存数据等,然后向客户端返回一个html页面.但这种方式并没有给予用户很好的应用体验, ...

随机推荐

  1. centos cmake 升级

    本以为升级cmake很简单 下载了最新的(3.15),./configure 没问题 make的时候,提示 openssl.c: undefined symbol openssl, openssl-d ...

  2. windows bat更改系统时间 & 同步internet时间

    最近刚好用到一款软件学习版,30天试用期满,但是还想继续用,不具体透露是什么软件了. 发现更改了系统时间后,这个软件就又能启动了,不过每次改来改去很麻烦,就写了段脚本 @echo off date 1 ...

  3. FMDB条件更新

    更新操作返回一个BOOL值,YES表示操作成功,NO表示执行过程遇到错误,可以通过-lastErrorMessage和-lastErrorCode查看错误信息.使用executeUpdate:方法执行 ...

  4. POJ 3233 矩阵快速幂&二分

    题意: 给你一个n*n的矩阵 让你求S: 思路: 只知道矩阵快速幂 然后nlogn递推是会TLE的. 所以呢 要把那个n换成log 那这个怎么搞呢 二分! 当k为偶数时: 当k为奇数时: 就按照这么搞 ...

  5. MacOS系统下简单安装以及配置MongoDB数据库(一)

    最近写了一个用node来操作MongoDB完成增.删.改.查.排序.分页功能的示例,并且已经放在了服务器上地址:http://39.105.32.180:3333. 项目一共四部分: 1.MacOS下 ...

  6. C语言宏定义#define用法

    #define是C语言中提供的宏定义命令,其主要目的是为程序员在编程时提供一定的方便,并能在一定程度上提高程序的运行效率,但学生在学习时往往不能 理解该命令的本质,总是在此处产生一些困惑,在编程时误用 ...

  7. 解决从Excel导入数据库，导入到DataTable时数据类型发生变化的问题(如数字类型变成科学计数法，百分数变成小数)

    做项目的时候,C#读取Excel数据到DataTable或者DataSet,设断点查看DataTable,发现Excel的显示为较长位数数字的字段如0.000012在DataTable中显示为科学计数 ...

  8. 路飞学城Python-Day19（Py_Notes）

    # 先定义类 class LuffyStudent: school = 'luffy' def learn(self): print('学习使我快乐') def eat(self): print('吃 ...

  9. 清空chrome浏览器缓存

    缓存是一个很深奥的东西,虽然查了半天,还是没有搞清楚,希望以后可以遇到前端大神,可以给一个傻瓜化的通俗易懂的解释 已经上线的,后续有迭代的软件,迭代的版本不应该手动清除缓存了,因为太麻烦,对客户来说不 ...

  10. HDU 2669 Romantic（ 拓欧水 ）

    链接:传送门 题意:求解方程 X * a + Y * b = 1 的一组最小非负 X 的解,如果无解输出 "sorry" 思路:裸 exgcd /***************** ...