div盒子,水平垂直居中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子垂直水平居中</title>
  <style>
    body{
      background-color: #ccc;
      margin:0;
      padding: 0;

    }
    .test{
       width: 150px;
       height: 75px;
       border: 1px solid black;

      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -75px;
      margin-top: -37.5px;
    }
  </style>
</head>
<body>
  <div class="test">
      盒子水平居中测试
  </div>
</body>
</html>

div盒子垂直水平居中的更多相关文章

  1. 不定宽高的DIV,垂直水平居中

    1.怎么让一个不定宽高的DIV,垂直水平居中? 答:1)使用CSS方法. 父盒子设置: display:table-cell; text-align:center; vertical-align:mi ...

  2. div img 垂直水平居中

    <style> div { width: 600px; height: 578px; text-align: center; display: table-cell; vertical-a ...

  3. 一个未知宽高的元素在div中垂直水平居中

    <body> <div id="#div1"> <img src="img1.png"></img> </ ...

  4. js实现未知宽高的元素在指定元素中垂直水平居中

    js实现未知宽高的元素在指定元素中垂直水平居中:本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中 ...

  5. div+css实现未知宽高元素垂直水平居中

    div+css实现未知宽高元素垂直水平居中.很多同学在面试的时候都会遇到这样的问题:怎么用div+css的方法实现一个未知宽高的弹出框(或者图片)垂直水平居中??如果用JS的话就好办了,但是JS的使用 ...

  6. div盒子水平居垂直中的几种方法

      div盒子水平居垂直中的几种方法<!DOCTYPE html><html>    <head>        <mete charset="ut ...

  7. 【CSS基础】实现 div 里的内容垂直水平居中

    方案一: 所有内容垂直水平居中 兼容性:IE8+. 条件:内容宽度和高度可以未知,可以是多行文字.图片.div. 描述:使用table-cell + vertical-align , html代码见文 ...

  8. css3之transform属性实现div不定宽高垂直水平居中

    transform的作用 transform 属性向元素应用 2D 或 3D 转换.该属性允许我们对元素进行旋转.缩放.移动或倾斜.(w3cschool) transform的兼容性 transfor ...

  9. css实现div不定宽高垂直水平居中解决方案

    在项目中我们经常能碰见然图片垂直水平居中,不定宽高的div垂直水平居中,等等~~ 现在我将介绍我所知道的几种用css来解决的几种方案. 1.父元素text-align:center;display:t ...

随机推荐

  1. eCharts动态加载各省份的数据

    假如从数据库读出以下数据,如何将数据展示在地图之上 1.部门的名称数据: List deptname=[联通事业部-上海联通项目组, 联通事业部-河南联通项目组, 联通事业部-贵州联通项目组, 联通事 ...

  2. TortoiseSVN Clean up 失败的处理方法

    当使用 TortoiseSVN 下载项目失败之后,重新下载之前需要 Clean up,在 TortoiseSVN 中 Clean up 总是失败.   在命令行行中执行 svn cleanup 就成功 ...

  3. distribution 中一直在运行 waitfor delay @strdelaytime 语句

    Replication 自动创建来一个 Job:Replication monitoring refresher for distribution,这个Agent执行一个sp: dbo.sp_repl ...

  4. LINQ系列:LINQ to DataSet的DataView操作

    1. 创建DataView EnumerableRowCollection<DataRow> expr = from p in products.AsEnumerable() orderb ...

  5. 推荐12个漂亮的 CSS3 按钮实现方案

    在过去,我们都是使用图片或者JavaScript来实现漂亮的按钮效果,随着越来越多的浏览器对CSS3的支持和完善,使用CSS3来实现美观的按钮已没有太多的障碍.今天,本文收集了12个很不错的CSS3按 ...

  6. Building OpenCascade on Windows with Visual Studio

    Building OpenCascade on Windows with Visual Studio eryar@163.com 摘要Abstract:详细说明OpenCascade的编译配置过程,希 ...

  7. ELF文件

    ELF文件格式是一个开发标准,各种UNIX系统的可执行文件都采用ELF格式,它有三种不同的类型: 可重定位的目标文件 可执行文件 共享库 现在分析一下上一篇文章中经过汇编之后生成的目标文件max.o和 ...

  8. 基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

    Bootstrap文件上传插件File Input是一个不错的文件上传控件,但是搜索使用到的案例不多,使用的时候,也是一步一个脚印一样摸着石头过河,这个控件在界面呈现上,叫我之前使用过的Uploadi ...

  9. andriod 手机按键检测事件 onKeyDown() 简述

    函数原型: public boolean onKeyDown(int keyCode, KeyEvent event); 第一个参数是用户按下键时,当前所接收到的按键代号: 第二个参数是按键事件的对象 ...

  10. ubuntu super daemon设置

    super daemon是一个在Linux下面全面管理自己服务设置的东东,他可以接管很多服务的设定,只需要在/etc/xinetd.d/下面放置好自己的配置文件就可以了,那么,具体应该怎么配置呢?   ...