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. element-ui学习

    1. 小技巧 使用导航路由 配置el-menu-item的index属性,如照片 也可使用数据动态配置导航菜单:参考 走马灯高度自适应 动态设置Carousel的height参数

  2. Python数据模型建立

    基本结构AutoField(Field) - int自增列,必须填入参数 primary_key=True BigAutoField(AutoField) - bigint自增列,必须填入参数 pri ...

  3. Windows上编译LLVM 3.2

    LLVM还是做的很好的,可以很方便的编译. 解压LLVM 3.2到[工作目录]/llvm/llvm-3.2.src 解压Clang到[工作目录]/llvm/llvm-3.2.src/tools/cla ...

  4. django中orm的简单操作

    数据库模型 from django.db import models # Create your models here. from django.db import models # Create ...

  5. zabbix前端添加平台脚本监控

    1.在前端创建脚本 2.添加监控配置 # 这里添加的监控为ping命令,用来探测网络的可用性. # 这里添加的监控为traceroute命令,用来探测网络的可用性. # 这里添加的监控为nmap命令, ...

  6. ListView ,GridView 通用适配器

    前言 接近半年的时间没有写博客了,今年公司的项目有点多,比较忙,没时间写,这是其一.其次是,这半年来,有时间的时候,我都会看看自己以前写的博客,也许是以前刚刚写博客,经验不足,感觉写出来的博客质量很不 ...

  7. iOS核心动画之anchorpoint

    anchorpoint是什么 All geometric manipulations to the view occur about the specified point 就是说所有的动画参考点都是 ...

  8. Azure Powershell获取Azure虚拟机的操作系统型号及具体版本

    Azure ARM 模式虚拟机: 1.登陆Azure账号 Add-AzureRmAccount -EnvironmentName AzurechinaCloud 2.选择指定订阅 Select-Azu ...

  9. (USB HID) In/Out Report 收發 Function

    在紀錄 In/Out Report 收發之前先來看一下一個struct typedef struct _Device_cb { uint8_t (*Init) (void *pdev , uint8_ ...

  10. static成员变量和static成员函数例程

    #include "pch.h" #include <iostream> using namespace std; class goods { public: good ...