1. 块在块中垂直居中
    (父元素postion:relative;   子元素position:absolute; top:50%; margin-top:负二分之一高度)

  2. 块在块中水平居中
    (子元素margin:0 auto 或auto)
  3. 用方法1将垂直水平同时居中

    #box {

    width: 100px;

    height: 80px;

    background-color: gray;

    position:absolute;

    top:50%;

    left:50%;

    margin-top:-40px;<!--向上高度一半-->

    margin-left:-50px;<!--向左宽度一半-->

    }

html中块元素的居中。及兼容性的更多相关文章

  1. HTML中块元素与内联元素的概念

    HTML中块元素与内联元素的概念 div就是一个块元素,所谓的块元素就是会独占一行的的元素,无论他的内容有多少,他都会独占一整行. p h1 h2 h3 ... div这个标签没有任何语义,就是一个纯 ...

  2. css中块元素和行内元素区别

    行内元素特点 1.和其他元素都在一行上: 2.元素的高度.宽度.行高及顶部和底部边距不可设置: 3.元素的宽度就是它包含的文字或图片的宽度,不可改变. 块元素特点 1.每个块级元素都从新的一行开始,并 ...

  3. 巧用CSS居中未知高度的块元素

    在网页中让一个未知高度的块元素水平垂直居中是一个老生常谈的问题,但是总是有些特殊场景让你无法得心应手的实现居中,本文介绍几种常用的经典的居中方法,总有一种适合你! 1. position .paren ...

  4. CSS行内元素和块级元素的居中

    一.水平居中 行内元素和块级元素不同,对于行内元素,只需在父元素中设置text-align=center即可; 对于块级元素有以下几种居中方式: 1.将元素放置在table中,再将table的marg ...

  5. 浅谈css中一个元素如何在其父元素居中显示

    css如何垂直居中一个元素的问题已经是一个老生常谈的问题了.不管对于一个新手或者老手,在面试过程中是经常被问到的.前两天在看一个flex的视频教程,当中提到了有关元素的居中问题,所以今天小编就来扒一扒 ...

  6. css中块级元素、内联元素（行内元素、内嵌元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  7. 让块元素在div中水平居中，并且垂直居中的五种方法

    在写代码前,先做下准备工作,写两个div,设置下div的大小,把小的div放在大的div里面.可以给小的div设置下颜色,方便观看. 方法一:写一个伪元素,将它设置为行内块元素,高度与父元素相同,写一 ...

  8. 《Web开发中块级元素与行内元素的区分》

    一.块级元素的特性: 占据一整行,总是重起一行并且后面的元素也必须另起一行显示. HTML中块级元素列举如下: address(联系方式信息) article(文章内容) aside(伴随内容) au ...

  9. HTML中为何p标签内不可包含div标签?那哪些块元素里面不能放哪些块元素呢？

    先看下面的例子你就能明白两者的差别: <p>测试一下块元素与<span>内联元素</span>的差别</p> <p>测试一下<div& ...

随机推荐

  1. C# 等待框

    今天发现dev控件自带了等待框,调用方便,而且不会阻塞主线程. 拉一个窗体,界面上放两个按钮,显示等待框,隐藏. <Window x:Class="WaitDialogTest.Mai ...

  2. hdu 1542/1255 Atlantis/覆盖的面积

    1542 1255 两道扫描线+线段树的入门题. 基本没有什么区别,前者是模板,后者因为是求覆盖次数至少在两次以上的,这个同样是具有并集性质的,所以把cover的判断条件更改一下就可以了qwq. hd ...

  3. leetcode 39 组合总和 JAVA

    题目: 给定一个无重复元素的数组 candidates 和一个目标数 target ,找出 candidates 中所有可以使数字和为 target 的组合. candidates 中的数字可以无限制 ...

  4. 蛋疼的Action.c (141): undeclared identifier `LAST'异常

    之前这个脚本运行了很久都没有问题,今天突然在场景运行不了: Action.c (141): undeclared identifier `LAST' 害的老子一直在纠结,这个关联函数没有问题啊,怎么一 ...

  5. “全栈2019”Java第五十七章：多态与构造方法详解

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  6. “全栈2019”Java第二十章：按位与、按位或、异或、反码、位运算

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  7. 本地Windows环境下安装MySql

    Windows 上安装 MySQL Windows 上安装 MySQL 相对来说会较为简单,你需要在 MySQL 下载中下载 Windows 版本的 MySQL 安装包. Download Link: ...

  8. Java 之多态

    Java 之多态(包含封装) 基础知识: Java 在处理基本数据类型(例如int ,char,double)时,都是采用按值传递的方式执行,除此之外的其它类型都是按引用传递的方式执行.对象除了在函数 ...

  9. 追随自己的价值观：用研经理 Anne Diaz 职业探索之路

    『漫谈』系列聚焦了人性脆弱面的价值.每期的对话嘉宾可能是爱彼迎设计团队的成员,也可能来自设计界的其他领域.对话主题都是我们在工作中很少讨论的话题. 这些话题涉及不同方面,比如失败.人生道路.冲突.成长 ...

  10. C# - 图片操作和Base64处理

    旋转 (1)按角度旋转 /// <summary> /// 根据角度旋转图标 /// </summary> /// <param name="img" ...