这里有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. 使用2个MR计算

    转载:http://www.cnblogs.com/sharpxiajun/p/5205496.html 最近做了一个小的mapreduce程序,主要目的是计算环比值最高的前5名,本来打算使用spar ...

  2. BZOJ3928 [Cerc2014] Outer space invaders

    第一眼,我勒个去...然后看到n ≤ 300的时候就2333了 首先把时间离散化,则对于一个时间的区间,可以知道中间最大的那个一定要被选出来,然后把区间分成左右两份 于是区间DP就好了,注意用左开右开 ...

  3. 如何在 Linux 上用 SQL 语句来查询 Apache 日志

    Linux 有一个显著的特点,在正常情况下,你可以通过日志分析系统日志来了解你的系统中发生了什么,或正在发生什么.的确,系统日志是系统管理员在解决系统和应用问题时最需要的第一手资源.我们将在这篇文章中 ...

  4. 将windows下的PLSQL转移到Ubuntu上

    1,首先下载安装wine,安装不成功的更新下源即可. 2,Ctal+Alt+T 打开控制台: cd ~/.wine/drive_c mkdir -p oracle/bin mkdir -p oracl ...

  5. ubuntu 14.04 难用的vi

    在插入状态下,按方向键出来的结果竟然是大写的字母ABCD,这是因为在ubuntu中其实没装vi,只装了vim-tiny,在系统上,vi仅仅是vim的一个别名. 这时候需要自己安装完整版的 vim su ...

  6. 【模拟题(电子科大MaxKU)】解题报告【树形问题】【矩阵乘法】【快速幂】【数论】

    目录: 1:一道简单题[树形问题](Bzoj 1827 奶牛大集会) 2:一道更简单题[矩阵乘法][快速幂] 3:最简单题[技巧] 话说这些题目的名字也是够了.... 题目: 1.一道简单题 时间1s ...

  7. 网易云课堂 OCP

    数据库DBA任务: 管理数据库可用性 设计并创建数据库 管理物理结构 管理基于设计的存储 管理安全性 网络管理 备份与恢复 数据库调整与优化 关系型数据库(RDBMS) 多个表数据之间存在着关系 关系 ...

  8. Qt之控件美化

    级联样式表 (CSS) 包含应用于网页中的元素的样式规则.CSS 样式定义元素的显示方式以及元素在页中的放置位置.可以创建一个通用规则,只要 Web 浏览器遇到一个元素实例,或遇到一个分配给某个特定样 ...

  9. DataNode,NameNode,JobTracker,TaskTracker用jps查看无法启动解决办法

    查看tasktracker的50060的地址无法正常查看,主要有两个原因,一个是在/tmp目录下有以前使用2.02版本留下的文件没有删除,二个是因为端口被占用了 解决方法: 一.删除/tmp目录下所有 ...

  10. hdu 2061

    PS:  以为找个简单来恢复信心..结果碰到那么傻逼的题目... 题意:给出学分和成绩,算GPA...关键是注意换行....它要求的换行我觉得超级奇怪...除了第一个正常,其他的输入完之后先一个换行. ...