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

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. 【题解】[APIO2010]特别行动队

    Link 题目大意:一段区间的贡献是\(ax^2+bx+c,x=\sum v\),求一个划分让总区间的价值最大.分段必须连续. \(\text{Solution:}\) 设计\(dp[i]\)表示前\ ...

  2. 正式班D5

    2020.10.10星期六 正式班D5 一.上节课复习 1.硬盘分类 ​ 1.机械磁盘 ​ io时间=平均寻道时间+平均延迟时间 ​ buffer:写缓冲区 ​ cache:都缓存 ​ 2.固态硬盘 ...

  3. LVS搭建

    LVS集群搭建 NAT架构图 1.在RS188,RS189操作 #安装httpd服务[root@t1 ~]# yum install -y httpd[root@t1 ~]# echo "I ...

  4. ubuntu19.10如何设置固定ip

    $ip a 看见系统中有两块网卡 lo: ...... ens33: ...... #cd /etc/netplan$ls目录下面有文件01-network-manager-all.yaml $sud ...

  5. Redis GEO 功能使用场景

    本文来源:https://www.dazhuanlan.com/2020/02/05/5e3a0a3110649/ 背景 前段时间自己在做附近直播相关业务,其中有一个核心的点就是检索用户附近的主播,也 ...

  6. VMware安装的Linux系统忘记密码 怎么修改root密码

    因为昨天新安装过虚拟机设置了新的密码,再加上我好长时间没有用自己旧的虚拟机,导致忘记了密码,原来虽然知道在单用模式下,找回密码,但是确实是自己从来都没有做过,还好我们组大手飞翔哥告诉了我,怎么找回ro ...

  7. 多测师讲解html _有序列表005_高级讲师肖sir

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>有 ...

  8. 关于pipeline的一篇转载博文https://www.cnblogs.com/midhillzhou/p/5588958.html

    引用自https://www.cnblogs.com/midhillzhou/p/5588958.html 1.pipeline的产生 从一个现象说起,有一家咖啡吧生意特别好,每天来的客人络绎不绝,客 ...

  9. 【思维】UVA 11300 Spreading the Wealth

    题目大意 vjudge链接 有n个人围圆桌而坐,每个人有Ai个金币,每个人可以给左右相邻的人一些金币. 若使得最终所有人金币数相等,求最小金币转移数. 数据范围 n<1000001 样例输入 3 ...

  10. VitualBox CentOS增强功能的安装使用 - Linux操作系统

        本人因为电脑配置原因,安装的是CentOS 6.6 minimal版本,虚拟环境为VirtualBox 4.3.18. 当我使用的时候,想从本机(WindowXP)电脑将文件共享到虚拟(Cen ...