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

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. VS Code 搭建编写Shell环境（WSL）

    安装过程 Win10开启WSL,方法略 安装VSCode,方法略 安装语法提示插件:shellman 安装格式化插件:shell-format(右键 -> 格式化文档(Ctrl + Alt + ...

  2. mac操作liunx

    mkdir demo //创建一个文件夹 touch index.html // 创建一个html文件 rm rouch index.html //删除找个index.html文件 rmdir dem ...

  3. STM32F103C8T6-CubeMx串口收发程序详细设计与测试（2）——程序规划、代码编写及测试

    摘要:演示程序的功能:通过中断接收串口数据,在1750us时间内没有收到新的字节的话,将收到的数据原封不动地发送出去,以测试串口的完整收发流程.对使用到的函数进行了说明,阐述了各个函数的调用顺序和调用 ...

  4. day61 Pyhton 框架Django 04

    内容回顾 1.django处理请求的流程: 1. 在浏览器的地址栏输入地址,回车发get请求: 2. wsgi模块接收请求: 3. 在urls.py文件中匹配地址,找到对应的函数: 4. 执行函数,返 ...

  5. java 画 哆啦A梦

    package Demo;import javax.imageio.ImageIO;import java.awt.*;import java.awt.image.BufferedImage;impo ...

  6. C语言从1打印到100再打印到1该如何编写？我只服最后一种写法！

    我觉得这是一个送分题,奈何人才太多了,给出了各种古怪的写法,如果是做项目的话,我比骄建议一些正常的写法,就是大家都能看得懂的,不要搞什么花里胡哨,不过你要是交流的话,既然是交流,我不觉得要多正规,即使 ...

  7. docker查看ip

    docker查看容器的网络ip   docker inspect -f '{{range .NetworkSettings.Networks}}{{.IPAddress}}{{end}}' conta ...

  8. php安装kafka扩展

    https://blog.csdn.net/zsl10/article/details/78743335 https://blog.csdn.net/lw545034502/article/detai ...

  9. __getattr__和__setattr__

    getattr 拦截运算(obj.xx),对没有定义的属性名和实例,会用属性名作为字符串调用这个方法 class F(object): def __init__(self): self.name = ...

  10. 华为路由器配置OSPF

    OSPF是什么 OSPF(Open Shortest Pass First,开放最短路径优先协议),是一个最常用的内部网管协议,是一个链路状态协议. 使用场景:适用于运营商.政府机构等大型网络中多节点 ...