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. AJAX方式调用百度天气

    后台代码: [HttpPost] public string AjaxWeather() { string CityName = string.IsNullOrEmpty(Request.Form[& ...

  2. Sublime text3!行首,行尾,批量编辑!

    1.Windows下的操作操作步骤 1.Ctrl + H 2.打开正则,输入^,然后Find All,查找所有的行首 3.打开正则,输入$,然后Find All,查找所有的行尾 4.光标闪动,就可以进 ...

  3. python excel处理

    #!/usr/bin/python # data:2018/4/20 # user:fei # -*- coding: utf-8 -*- import json import sys import ...

  4. “全栈2019”Java第三十七章：类与字段

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

  5. Shell中反引号和$()的区别

    Shell中可以用来实现变量代换的命令有两种,一种是由反引号括起来的一条命令另一种是由$()括起来一条命令,shell先执行这条命令,然后见输出结果立刻代换到当前命令行中. 例如定义一个变量存放dat ...

  6. 01Trie树 CF923C Perfect Security

    CF923C Perfect Security 上下各n个数,求一种排列p,使上面的数i异或pi成为新的数i,求方案另字典序最小,输出该结果 01Trie树. 记录每个节点经过多少次. 每一次查询的时 ...

  7. leetcode-551-Student Attendance Record I(判断是否出现连续几个相同字符)

    题目描述: You are given a string representing an attendance record for a student. The record only contai ...

  8. 容器化VS微服务

    1 微服务 1.1 思想 开发人员自己测试.部署和运维自己编写的代码,即自己负责构建生命周期的全部. 1.2 Spring Boot 提供服务化的能力,即把容器.服务所需依赖和服务一起打包成一个jar ...

  9. 2016级算法第四次上机-E.Bamboo and the Ancient Spell

    Bamboo and the Ancient Spell 分析 可能英文读题难度比较大,但是只要看到全大写的 "THE LONGEST COMMON SUBSEQUENCE !"应 ...

  10. wx.config失败

    wx.config({ debug: false, appId: _appId, timestamp: _timestamp, nonceStr: _nonceStr, signature: _sig ...