这里有top和margin-top的区别，top(left,right,bottom)是绝对定位，要用position,margin-top是相对定位，相对于相邻的元素或者父元素。

代码如下:

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >

<title>square at center</title>

<style type="text/css">

 #square{

 	 position:absolute;

     top:50%;

     left:50%;

     margin-top:-50px;

     margin-left:-50px;

     width:100px;

     height:100px;

     background-color:red;

  }

</style>

</head>

<body>

      <div id="square">

      </div>

</body>

</html>

　　

css让一个正方形方块垂直居中的更多相关文章

  1. 公司的一个面试题：如何用css让一个容器水平垂直居中？

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. 用css让一个容器水平垂直居中

    阅读目录 方法一:position加margin 方法二: diaplay:table-cell 方法三:position加 transform 方法四:flex;align-items: cente ...

  3. 如何用css让一个容器水平垂直居中

    方法一: 以前设置里面的绿div总是会使用{position:absolute;left:50%;top:50%;margin-left:-div宽度的一半;margin-top:-div高度的一半} ...

  4. css进阶 04-如何让一个元素水平垂直居中？

    04-如何让一个元素水平垂直居中? #前言 老板的手机收到一个红包,为什么红包没居中? 如何让一个子元素在父容器里水平垂直居中?这个问题必考,在实战开发中,也应用得非常多. 你也许能顺手写出好几种实现 ...

  5. css确定元素水平居中和垂直居中

    ---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...

  6. 用css实现一个空心圆，并始终放置在浏览器窗口左下角

    用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;   ...

  7. 还在为小三角形切图？使用纯CSS写一个简单的三角形

    同学们,当美工给的设计图是这样: 或者这样: 我的内心其实是拒绝的-_-:但工作还得干,大部分同学会写 <style> .icon{width:20px;height:20px;displ ...

  8. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  9. 如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

随机推荐

  1. ios基础篇（六）——UITextView的常用方法及技巧

    上篇说到了UITextField,我们先来说说UITextView和UITextField的不同: UITextView支持多行输入; UITextFiled只支持单行; UITextView没有pl ...

  2. CPU信息查询

    cat /proc/cpuinfo |grep "physical id"|sort |uniq|wc -l //查看CPU的个数 cat /proc/cpuinfo |grep ...

  3. curl,chkconfig

    1. Linux系统服务管理 工具ntsysv 类似图形界面管理工具,如果没有该命令使用 yum install -y ntsysv 安装 常用服务:crond, iptables, network, ...

  4. Jquery select 选中项中自定义的值

    给select 赋值,除了已有的value及text,新建一属性simple_name function GetDicOfficeList(dicType, sid) { $.ajax({ url: ...

  5. js计算日期的前几天的日期

    月份0---11 var date = new Date(year,fenye_arr[0]-1,fenye_arr[1]);            miao=date.getTime(); var ...

  6. DrawerLayout一个简单的实例（与ActionBar无关）

    官方的Demo里有DrawerLayout的例子,涉及到ActionBar,这里不用ActionBar,手痒,写个超级简单的小Demo,备着以后或许会用到. 详细的内容,可以访问:http://blo ...

  7. iOS - CADisplayLink与NSTimer

    一.CADisplayLink简介 CADisplayLink 是一个定时器对象可以让你的应用以与显示器的刷新界面相同的频率进行绘图. 应用如果想要创建 display link ,需要提供一个目标对 ...

  8. vs2013的使用和单元测试

    我的vs2013是之前就安装好的,安装过程就不介绍了,我平常编写代码就是用的vs2013,用起来还是很方便的,现在我们就开始使用vs2013进行单元测试 首先我们建立一个项目,项目中选择virtual ...

  9. Hibernate缓存机制 (2013-07-02 13:51:32)转载▼

    标签: java web hibernate 缓存 代码        分类: javaweb 缓存是位于应用程序与物理数据源之间,用于临时存放复制数据的内存区域,目的是为了减少应用程序对物理数据源访 ...

  10. 《JAVA学习笔记(14-1---14-7)》

    [14-1]面向对象-继承-概述 /* //描述学生 class Student { //属性 String name; int age; //行为 void study() { System.out ...