这里有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. （置顶）js实现超过页面一屏后，点击图标滚动到页面顶部top

    <script type="text/javascript">$(document).ready(function() {    var ScrolltoTop = $ ...

  2. Octopus系列之系统中的价格

    系统中的价格 产品原价格  计算=Round(数据库数值[默认USD]*汇率)[Round的意思说:对价格做小数位的截取]产品原价格  展示=Currency(产品原价格  计算)[给大家说明一下什么 ...

  3. js中Array自定义contains, indexOf, delete方法.

    Array.prototype.contains = function (elem) { for (var i = 0; i < this.length; i++) { if (this[i] ...

  4. YUM安装提示PYCURL ERROR 6 - ＂Couldn't错误的解决办法

    当编译PHP时出现如下错误时,找不到头绪 这时,打开DNS   vim /etc/resolv.conf   添加一行nameserver 192.168.1.1 完成上一步,则解决该问题 或者:ec ...

  5. linux-网卡故障

    Linux 网络问题解决思路 1.查看 /etc/sysconfig/network-script/ 查看eth0和eth1的配置是否正确 2.查看 /etc/modual.conf 的配置模块是否正 ...

  6. hdu 4612 Warm up

    http://acm.hdu.edu.cn/showproblem.php?pid=4612 将原图进行缩点 变成一个树 树上每条边都是一个桥 然后加一条边要加在树的直径两端才最优 代码: #incl ...

  7. elasticsearch nested查询

    项目里可能会遇到多级嵌套的情况,实际上最多两级,三级及以上,我测试不通过. 一级索引时,我插入数据,会自动创建索引映射:然二级时,索引映射必须手动创建. 映射: PUT test999 { " ...

  8. ros科大讯飞语音识别环境配置

    以在线命令词识别为例: 链接:http://www.xfyun.cn/sdk/dispatcher 1.下载SDK,解压: 2.在ROS工作空间下创建一个Package: catkin_create_ ...

  9. NLTk

    1.python的nltk中文使用和学习资料汇总帮你入门提高 http://blog.csdn.net/huyoo/article/details/12188573

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

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