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. solr7.3集群搭建

    solr集群搭建 原博客:https://blog.csdn.net/gdsgdh308227363/article/details/81004706 注意,在搭建solr集群前,建议最好有一个sol ...

  2. 一行代码搞定Dubbo接口调用

    本文来自网易云社区 作者:吕彦峰 在工作中我们经常遇到关于接口测试的问题,无论是对于QA同学还是开发同学都会有远程接口调用的需求.针对这种问题我研发了一个工具包,专门用于远程Dubbo调用,下面就让我 ...

  3. nej+regular环境使用es6的低成本方案

    本文来自 网易云社区 . 希望在生产环境中使用es6/7,babel应该是最普遍的选择.这是babel官网中,它对自己的定义: Babel 自带了一组 ES2015 语法转化器.这些转化器能让你现在就 ...

  4. go语言实战教程：Redis实战项目应用

    项目Redis配置 在实战项目中使用Redis功能,首先需要进行Redis配置.本实战项目中,关与Redis的配置项包含:连接类型.地址.端口.公共前缀.以上配置项被定义包含在Iris框架的redis ...

  5. Linux下简易进度条的实现

    在生活中,进度条是很常见的,那么,进度条是如何实现的呢? 首先,进度条的动态是利用人眼视觉暂留效果的.实际上是如下过程: 先输出:[=                                  ...

  6. Java 之多态

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

  7. PL/SQL那点事-->SqlSession operation; SQL []; ORA-01722: 无效数字

    PL/SQL那点事-->SqlSession operation;SQL []; ORA-01722: 无效数字 出现这种情况,在网上查了很多方法:大致主要有两种方法帮助我们解决这个问题: 1. ...

  8. AVL树插入(Python实现)

    建立AVL树 class AVLNode(object): def __init__(self,data): self.data = data self.lchild = None self.rchi ...

  9. 使用maven搭建ssm框架的javaweb项目

    目前主流的javaweb项目,常会用到ssm(Spring+Spring MVC+Mybatis)框架来搭建项目的主体框架,本篇介绍搭建SSM框架的maven项目的实施流程.记之共享! 一.SSM框架 ...

  10. 爱漂泊人生 30个php操作redis常用方法代码例子

    http://www.justwinit.cn/post/8789/ 背景:redis这个新产品在sns时很火,而memcache早就存在, 但redis提供出来的功能,好多网站均把它当memcach ...