网址：http://www.cnblogs.com/asqq/archive/2012/04/09/2438745.html

1. 元素的定位的方法选择 ：absolute 。

2. 给定元素的宽和高。

3.因为是absolute定位的方法， 用百分比的方法，借用left和top的属性，将元素的左上顶点的坐标定位到屏幕的中心。

4. 矫正图片的位置，margin-top和margin-left可以为负数时的属性作用，将margin-left和margin-top的值，分别定位元素宽和高的值的一半，并取为负数。

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="utf-8"/>

         <title>Hello The World!</title>

         <link href="css/main.css" rel="stylesheet" type="text/css" />

         <style>

             #feeling{

                 background-color: #0000CD;

                 position: absolute;

                 width: 800px;

                 height: 600px;

                 top: 50%;

                 left: 50%;

                 margin-top: -300px;

                 margin-left: -400px;

             }

         </style>

     </head>

     <body>

         <id id="feeling">

         </id>

     </body>

 </html>

HTML 元素居中的方法的更多相关文章

  1. cssy元素居中的方法有哪些？

    css的元素居中 各位小伙伴们在努力写网页的时候有没有遇到过这样的一个问题呢? 在写的时候发现他不居中,可是要分分钟逼死强迫症的啊! 别急,我来啦 哈哈哈 今天就带来三种css的元素居中的方法 第一种 ...

  2. CSS设置元素居中的方法

    1.margin:0 auto; 2.body{text-align:center;} 3.position:absolute; left:50%; margin-left:-(宽/2);

  3. Css元素居中设置

    你对DIV CSS居中的方法是否了解,这里和大家分享一下,用CSS让元素居中显示并不是件很简单的事情,让我们先来看一下CSS中常见的几种让元素水平居中显示的方法. DIV CSS居中 用CSS让元素居 ...

  4. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  5. <转载>使CSS文字图片div元素居中方法之水平居中的几个方法

    文字居中,文字垂直居中水平居中,图片居中,图片水平居中垂直居中,块元素垂直居中?当我们在做前端开发是时候关于css居中的问题是很常见的.情 况有很多种,不同的情况又有不同的解决方式.水平居中的方式解决 ...

  6. diplay:table-cell和伪元素：after方法让图片居中

    让图片居中和文字居中是不一样的,文字居中可以通过line-height等调整,让图片居中方法,参考各种资料博文和测试  目前接触两种方法 display:table-cell和伪元素:after方法 ...

  7. 网页元素居中的n种方法

    导语:元素居中对齐在很多场景看上去很和谐很漂亮.除此之外,对于前端开发面试者的基础也是很好的一个考察点.下面跟着作者的思路,一起来看下吧. 场景分析 一个元素,它有可能有背景,那我要它的背景居中对齐 ...

  8. 大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

    概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...

  9. css中元素居中总结

    很多时候,我们需要让元素居中显示:1. 一段文本的水平居中,2. 一张图片的水平居中,3. 一个块级元素的水平居中:4. 单行文本的竖直居中,5. 不确定高度的一段文本竖直居中,6. 确定高度的块级元 ...

随机推荐

  1. Termux 高级终端安装使用配置教程

    Termux 高级终端安装使用配置教程,这篇文章拖了有小半年.因为网上相关的文章相对来说还是比较少的,恰好今天又刷了机,所以就特意来总结一下,希望本文可以帮助到其他的小伙伴.发挥Android平台更大 ...

  2. Hive的动态分区

    关系型数据库(如Oracle)中,对分区表Insert数据时候,数据库自动会根据分区字段的值,将数据插入到相应的分区中,Hive中也提供了类似的机制,即动态分区(Dynamic Partition), ...

  3. HTML 框架导航

    初次学习HTML,在www.w3school.com.cn看到了框架导航,上面的例子没有看懂所以搜了一下相应的问题,最后弄懂了怎么实现同一界面下的框架导航. 首先是www.w3school.com.c ...

  4. 几道STL题目（FJUT - OJ STL训练1）

    这个OJ一直在做,一些专题题目都很好,从易至难,阶梯上升,很适合像我这样的蒟蒻 =7= 这篇是关于其中一个专题训练的题解思路及代码   http://120.78.128.11/Contest.jsp ...

  5. Python网络爬虫实战(四)模拟登录

    对于一个网站的首页来说,它可能需要你进行登录,比如知乎,同一个URL下,你登录与未登录当然在右上角个人信息那里是不一样的. (登录过) (未登录) 那么你在用爬虫爬取的时候获得的页面究竟是哪个呢? 肯 ...

  6. Servlet控制台输出乱码问题

    在如下图的配置页面: 在此行添加编码格式:

  7. 视频转成在github的readme中展示项目的gif动图

    本文中涉及的FastStone Capture和FFmpeg两个软件的百度网盘链接: 链接:https://pan.baidu.com/s/1D5LO9Qmjl-vwJZfnbAloyQ 提取码:56 ...

  8. 常用的HDFS操作

    首先,把Hadoop命令加入到PATH环境变量中,直接通过start-dfs.sh开启Hadoop,也可以直接通过hdfs命令访问HDFS中的内容,方便平时的操作. 配置PATH环境变量 vim  ~ ...

  9. 从原理到场景 系统讲解 PHP 缓存技术(全)

    概述 缓存已经成了项目中是必不可少的一部分,它是提高性能最好的方式,例如减少网络I/O.减少磁盘I/O 等,使项目加载速度变的更快. 缓存可以是CPU缓存.内存缓存.硬盘缓存,不同的缓存查询速度也不一 ...

  10. css或Angular框架限制文本字数

    提需求的来了 某一期产品迭代时,新增了一个小功能,即:在单元格中的文本内容,字符超过20个字的时候,需要截断,并显示20个字符+一个省略号,未超过,无视. 这需求看上去不怎么复杂,看起来可以用css做 ...