代码在下面，可以直接用。

bb两句，个人见解：

text-align 是让里面的内容水平居中

line-height 是行高，行高等于元素的高度 就能让内容垂直居中

left和top 50% 是根据html 来定位的， 只能让元素的左上顶点，也就是这个

要达到想到的位置，就要减去自身宽高的一半。 margin-left：-100px margin-top : -100px。

最好用的就是第2个.demo里的方法了

通过绝对定位 上下左右都为0的话就是让盒子和可视区一样大

auto = 可视区的宽高 减去 盒子的宽高    简单的说就是均分剩余空间

margin ： auto 就是 减去上下左右盒子的宽高再平分 达到水平垂直居中

再给盒子一个固定宽高。就能完成水平垂直居中

宽度为auto的绝对定位元素 可以通过left与right 调整它的宽度

高度为auto的绝对定位元素 可以通过top与bottom 调整它的宽度

css水平垂直居中 三种最常用的方式的更多相关文章

  1. css 水平垂直居中两种常用方式

  2. css中的三种基本定位机制

    css中的三种基本定位机制 a.普通文档流 b.定位:相对定位 绝对定位 固定定位 c.浮动 1.普通流中,元素位置由文档顺序和元素性质决定,块级元素从上到下依次排列,框之间的垂直距离由框的垂直mar ...

  3. CSS中的三种基本的定位机制（普通流、定位、浮动）

    一.普通流 普通流中元素框的位置由元素在XHTML中的位置决定.块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到.行内元素在一行中水平布置. 普通流就是html文档中的元素如块 ...

  4. CSS水平垂直居中总结

    行内元素水平居中 把行内元素包裹在块级父元素中,且父元素中的css设置text-align:center; <!DOCTYPE html> <html> <head> ...

  5. 前端js,css文件合并三种方式,bat命令

    前端js,css文件合并三种方式,bat命令 前端js文件该如何合并三个方式如下:1. 一个大文件,所有js合并成一个大文件,所有页面都引用它.2. 各个页面大文件,各自页面合并生成自己所需js的大文 ...

  6. python 中增加css样式的三种方式

    增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...

  7. Java程序员的现代RPC指南（Windows版预编译好的Protoc支持C++，Java，Python三种最常用的语言，Thrift则支持几乎主流的各种语言）

    Java程序员的现代RPC指南 1.前言 1.1 RPC框架简介 最早接触RPC还是初学Java时,直接用Socket API传东西好麻烦.于是发现了JDK直接支持的RMI,然后就用得不亦乐乎,各种大 ...

  8. 浅淡Webservice、WSDL三种服务访问的方式(附案例)

    Webservice Webservice是使应用程序以与平台和编程语言无关的方式进行相互通信技术. eg:站点提供访问的数据接口:新浪微博.淘宝. 官方解释:它是一种构建应用程序的普遍模型,可以在任 ...

  9. 三种Singleton的实现方式

    来源:http://melin.iteye.com/blog/838258 三种Singleton的实现方式,一种是用大家熟悉的DCL,另外两种使用cas特性来实现. public class Laz ...

随机推荐

  1. 几个常用markdown工具的主要优缺点

    几个常用markdown工具的主要优缺点 最近对几个热门的markdown工具做了一个对比表 表格 脚注 图片和图床 平台 移动端 实时预览 收费 操作难度 导出功能 mweb 非常棒 预览正常显示 ...

  2. 远程触发Jenkins的Pipeline任务的并发问题处理

    前文概述 本文是<远程触发Jenkins的pipeline任务>的续篇,上一篇文章实战了如何通过Http请求远程触发指定的Jenkins任务,并且将参数传递给Jenkins任务去使用,文末 ...

  3. EntityFramwork基础用法

    一.EntityFramework(简称"EF")是什么? 在.NET3.5之前,我们经常编写ADO.NET代码或通过封装好的数据库访问层来与数据库进行交互,进行CRUD操作.这种 ...

  4. 关于IPA文件重签名后如何跟踪管理APP的技术探讨和实践演示

    前言:开发iOS的朋友都知道,在功能开发完成后,我们就会用申请的苹果账号在后台做证书配置,然后提交到AppStore,但是也有部分APP我们不需要提交到AppStore,比如内部测试用的APP.定制给 ...

  5. Word+Excel 问题及解决

    [Word] 快捷操作 (1)每个字后面都有换行符的处理办法: 替换:∧p -> 空格 (2)隐藏Word文档中的换行符: word选项 -> 显示 -> 段落标记 [Excel]

  6. 网站搭建-云服务器ECS-镜像管理

    学习笔记: 快照,系统盘可创建镜像,数据盘不可以. 实例可以直接创建镜像,包括系统盘和数据盘 复制镜像: 新购服务器,选择镜像(又买). 共享镜像: 账号ID就是UID 云市场获取镜像; 1. 创建新 ...

  7. 【状态压缩DP】SCOI2009 围豆豆

    题目大意 洛谷链接 在一个\(N×M\)的矩阵方格内分布着\(D\)颗豆子,每颗豆有不同的分值\(V_i\).游戏者可以选择任意一个方格作为起始格,每次移动可以随意的走到相邻的四个格子,直到最终又回到 ...

  8. switch host 切换本地host

    百度网盘提取地址 提取码: 753r 下载后放到软件目录即可使用

  9. subprocess中命令为参数序列和字符串的区别

    参数args 参数args可以是一个参数序列,也可以是一个单独的字符串.参数序列通常是首选的,因为它允许模块处理参数的转义和引号(例如,允许文件名中有空格). 如果传递参数序列,默认情况下,程序执行序 ...

  10. Elasticsearch（5）：添加文档

      1 ES数据读写流程¶ ES中,每个索引都将被划分为若干分片,每个分片可以有多个副本.这些副本共同组成复制组,复制组中的分片在添加或删除文档时必须保持同步,否则,从一个副本中读取的数据将与从另一个 ...