这里有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. mysql str_to_date字符串转换为日期

    mysql内置函数,在mysql里面利用str_to_date()把字符串转换为日期. 示例:分隔符一致,年月日要一致 select str_to_date('2008-4-2 15:3:28','% ...

  2. h5 本地存储和读取信息

    总结:cookie的缺点很明显,最多只能存储4KB的数据,每个HTTP请求都会被传送回服务器,明文传输(除非你使用SSL)对于购物网站而言,cookie是非常重要的,为了实现购物车功能,把已选物品加入 ...

  3. maven的安装与使用

    一.Maven是什么 Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义 ...

  4. JavaWeb chapter 1 http协议

    1.  静态web和动态web的区别: 静态web和动态web最本质的区别是静态web是无法进行数据库操作,而动态web是可以进行数据库操作的.动态web的最大特点就是具有交互性,所谓交互性就是服务器 ...

  5. android程序打包成APK

    1.下载ant(从官网上下载没有bin目录,可以直接在百度上搜APACHE-ANT-1.9.4-BIN.ZIP) 2.解压到C盘根目录(也可以是其他盘) 3.修改环境变量 ANT_HOME    C: ...

  6. C#点击按钮用DataGridView动态增加行、删除行，增加按钮列

    原来有一行: 点击添加,在下面增加同样的一行 新增加的行有一列删除按钮,点击某行的删除按钮时,删除当前行 方法: 哈哈,我果然好聪明啊 1.文本框.文本框.添加按钮 2.一个DataGridView( ...

  7. Windows下为64位的python3.4.3安装numpy

    貌似现在没有python3.x的numpy 64位.exe安装包只有.whl的(也可能是我没找到)只能在终端下安装 1.到官网https://www.python.org/downloads/下载py ...

  8. 数组包含字典-根据key排序

    NSArray *array = [NSArray array]; [array sortedArrayUsingComparator:^NSComparisonResult(id obj1, id ...

  9. Tomcat 网站部署（三）

    一.Tomcat的部署方式有以下两种 1.自动部署 2.虚拟目录 二.自动部署 文件必须放在放在webapps就可以了,可以用这样访问 http://localhost:8080/放在webapps目 ...

  10. windows下将磁盘脱机，并在"我的电脑"下显示

    方案一: .右键单击"我的电脑". 2.打开:管理-磁盘管理. 3.在右边出现的磁盘分区里,你想隐藏的分区上右键单击“更改驱动器名和路径”. 4.出现一个对话框,点击“删除”. 5 ...