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. 【译文】不是所有的 bug 都值得修复的

    原文作者:KRISTINE PINEDO 译者:白乐航 欢迎访问网易云社区,了解更多网易技术产品运营经验. 作为软件开发者,您只需要为客户编写和交付出色的产品和功能. 但您也知道软件开发并不总是那么容 ...

  2. 企业库连接形式简单例子记录 EnterpriseLibrary.Data

    结构图 webconfig 配置正确的连接字符串 <connectionStrings> <add name="DBConnection" connectionS ...

  3. UI Automator Viewer的使用

    uiautomatorviewer是android SDK自带的工具.通过截屏并分析XML布局文件的方式,为用户提供控件信息查看服务.该工具位于SDK目录下的tools\bin子目录下.可以看到,它是 ...

  4. iOS检测项目图片资源是否包含P3图片

    1.问题描述 我们需要知道的是在iOS9.3以下系统上,.ipa包内如果含有p3图片,将会导致严重的闪退问题,具体原因还请google,非本文的重点. 2.问题解决 拿到的如果是ipa包(不是则跳过) ...

  5. php从文本读入数据，处理结果再导入到文本

    1,php从文本逐行读入数据,保存到数据组.使用fopen读取文本内容,逐行读取文本是$majorId = trim(fgets($rfile, 4096));. $rfile = fopen(&qu ...

  6. Python环境安装与升级

    Python是跨平台的,它可以运行在Windows,Mac,Linux/Unix系统上,在Windows上写的Python程序,在Linux上也是能够运行的.目前,Python有两个大版本,一个是2. ...

  7. mybatis的入门(一)

    一.mybatis的介绍 mybatis是Apache的一个开源项目ibatis,2010年这个项目由apache software foundation 迁移到了google code,并且改名为M ...

  8. FreeRTOS-03中断测试

    根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 portDISABLE_INTERRUPTS(); /*关中断*/portENABLE_ ...

  9. 剑指offer——面试题18.1：删除链表中重复的节点

    // 面试题18(二):删除链表中重复的结点 // 题目:在一个排序的链表中,如何删除重复的结点?例如,在图3.4(a)中重复 // 结点被删除之后,链表如图3.4(b)所示. #include &l ...

  10. Flexbox（弹性盒子）

    CSS3属性:这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. 属性介绍: 创建Flex容器 .container ...