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. Lookup component 用法

    Lookup component 类似于Tsql的join子句, select a.* ,b.* from dbo.tis a left join dbo. tdes b on a.code=b.co ...

  2. UGUI 之获取当前控件的高度

    当Canvas Scaler选择Constant Pixel Size 当前的分辨率会被被固定,可以用RectTransform类里面的.rect变量值获取 height或Width. 在次情况下获取 ...

  3. JBOSS.71.1.Final安装配置

    对于JBOSS大家了解多少,相信做Java开发的小童鞋对于Tomcat一定不陌生,而今天为大家介绍的JBOSS也是一款服务器软件,相比Tomcat,JBOSS对于高级的JavaEE相对来说更强大一点, ...

  4. 【原创】机器学习之PageRank算法应用与C#实现(2)球队排名应用与C#代码

    在上一篇文章:机器学习之PageRank算法应用与C#实现(1)算法介绍 中,对PageRank算法的原理和过程进行了详细的介绍,并通过一个很简单的例子对过程进行了讲解.从上一篇文章可以很快的了解Pa ...

  5. Notes:indexedDB使用

    indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...

  6. 【tomcat】不同域名解析到同一tomcat不同项目上

    问题: 1. 有多个域名,想输入的每个域名只能访问其中的一个项目 2. 这些项目都部署在同一个tomcat上的 解决步骤:      1.首先把所有域名都解析到这台服务器上,解析时只能填写ip地址,不 ...

  7. preg_match的isU代表什么意义

    正则后面的/(.*)/isU  ,“isU”参数代表什么意思?这是正则中的修正符.i是同时查找大小写字母,s是圆点(.)匹配所有字符,包括换行符.如果没有设定s,则不包括换行符.U是反转了匹配数量的值 ...

  8. MySQL学习（二）SQL语句的总结

    1.连接查询和关联查询连接查询:把两个表中相同的元素的连接就可以查询,使用:where里,select table1.*,table2.* from table1,table2 where table ...

  9. Nodejs之MEAN栈开发（四）---- form验证及图片上传

    这一节增加推荐图书的提交和删除功能,来学习node的form提交以及node的图片上传功能.开始之前需要源码同学可以先在git上fork:https://github.com/stoneniqiu/R ...

  10. SignalR的Javascript客户端API使用方式整理

    SignalR的服务端提供了两种实现方式,分别是PersistentConnection和Hub,这两种方式的侧重点不同: PersistentConnection更接近于底层,编程接口比较简单,传输 ...