这里有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. SqlFunctions 可以在EF种调用sqlserver的函数

    在EF5环境下,首先添加EF环境,在引用中添加Syste.Data.Entity,再添加命名空间 using System.Data.Objects.SqlClient; 然后写一个控制器测试 pub ...

  2. c++实现之 -- 汉语词语的简单处理

    好了,我们现在已经会怎样读入了,然后就是研究一下如何存储等一些细节上的的问题了. 首先,比较函数是不能传入char*的地址的,但是可以接受一个string类. 然而,如果是两个比较长的string类, ...

  3. K需要修改的内容

    1.需要保存默认案件,所有相关的页面的Title都要显示默认按键信息. 2.播放器需要调整,左侧的是播放信息,用户选择:案件/设备/然后就把该目录下的文件都展示出来.用户选择的时候马上进行播放.右侧有 ...

  4. NimBus一个好的开发框架

    NimbusKit是一个非常适合有经验的开发人员使用的iOS开发框架,具备完整的文档,并且提供了模块化的方式来解决iOS开发中的各种不同需求.最重要的是,该框架会经常添加一些新的组件和功能. Nimb ...

  5. 酷狗音乐盒缓存文件夹KuGouCache的设置方法

    1.每次一打开酷狗总能在E盘里找到这个 KuGouCache 文件夹 ,是自动生成的MV缓存文件 .按照常规 ,可以修改这个文件的办法是 找到C盘里的:用户\administrator\AppDate ...

  6. ModuleWorks免费下载使用方法大全

    ModuleWorks为模拟机器的工具运转及(或)机床和车床材料的搬运提供了一整套解决方案. 模拟技术可以识别潜在的碰撞问题,允许在NC代码生成前进行除错检查,并且渐渐成为CAM处理方面必不可少的解决 ...

  7. JS随鼠标坐标移动，显示浮动层内容

    在表单等项目中往往会遇到类似于“备注”.“说明”等100个字内的内容需要显示. 这些内容如果全部呈现开,会影响布局和美观,确又没有必要设计一个层或是一个页面. 那么,我们可以把这些内容放到浮动层中,鼠 ...

  8. [转]AndroidManifest.xml文件详解

    转自:http://www.cnblogs.com/greatverve/archive/2012/05/08/AndroidManifest-xml.html AndroidManifest.xml ...

  9. SharePoint表单和工作流 - Nintex篇（二）

    博客地址 http://blog.csdn.net/foxdave 接上篇点击打开链接 试用版获得的示例网站是一个SharePoint 2010 Server版的网站,我们先来看一下Nintex整个一 ...

  10. JAVA SERVLET专题（上）

    SERVLET简介 ·Java Servlet 是和平台无关的服务器端组件,它运行在Servlet容器中.Servlet容器负责Servlet和客户的通信以及调用Servlet的方法,Servlet和 ...