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

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. angularCroppie

    下载 angularCroppieangularCroppie 图像Cropper使用Croppie 安装 Npm: Npm安装角croppie 使用 添加依赖项:angular.模块("m ...

  2. Nginx 配置 http 强制跳转到 https

    个人真实配置 架构:Nginx 反向代理 + Nginx 前端(LNMP) 在 Nginx 反向代理的 虚拟机主机配置文件中,作如下配置: upstream ilexa_cn { server 192 ...

  3. TP5发送邮件

    1,前提去qq邮箱开启smtp 2,生成授权码 2,发送短信给 3,附上代码 贴上代码如下 <?phpnamespace app\mails\controller;use \think\Cont ...

  4. docker-管理镜像常用命令

    1. docker管理镜像常用命令 指令 说明 docker   run     [容器 CONTAINER ID] 创建一个新的容器并运行一个命令 docker   start   [容器 CONT ...

  5. oracle 11g linux 导入中文字符乱码问题解决

    1. 涉及的字符集 这个可以分成三块,数据库服务器字符集(server).实例字符集(instance), 会话字符集(session) 2. 乱码的原因 session 的字符集和 server 的 ...

  6. 远程IO

    远程io 远程io ZLAN6842,ZLAN6844是8路远程O控制器.含有8路DI.8路DO,8路AI输入.其中DI支持干节点和湿节点,带光耦隔离:DO为继电器输出,具有5A 250VAC或5A ...

  7. 用 C 语言游戏编程开发！果然最担心的事又发生了！

    30了.我要怎么办,老了.人就像一头小毛驴,方向都是牵着的人定的. 这个项目从去年开始的,一个手机游戏,当时接这个项目的时候其实没有太多考虑,我一向都喜欢打肿脸充胖子的,好面子,人家找上门来,不能不给 ...

  8. swoft 使用协程 初试

    控制器访问 /hi /** * @Swoft\Bean\Annotation\Mapping\Inject("UserService") * @var UserService */ ...

  9. spring boot:shardingsphere+druid整合seata分布式事务(spring boot 2.3.3)

    一,shardingshpere为什么要整合seata? 分库分表是数据库扩展中最常用的处理方法, shardingshpere作为使用最广泛的分表中间件, 如果不支持分布式事务,则它的数据一致性就会 ...

  10. git reset 与 git revert的区别?

    一,git reset的功能: 该命令修改HEAD的位置,即将HEAD指向的位置改变为之前存在的某个版本, 说明: 修改后,push到远程仓库时需要使用"git push -f"提 ...