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. react-native 简述

    1. RN 是什么 2. RN 与传统Hybrid框架相比的优势 3. RN的优势 4. RN的劣势 5. RN开发重点关注的问题 1 RN是什么 2 RN 与传统Hybrid框架相比的优势 传统的如 ...

  2. 【原创】开源Math.NET基础数学类库使用(16)C#计算矩阵秩

                   本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新  开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 上个月 ...

  3. Chrome开发工具之Console

    Chrome开发工具-Console 看了别人的博客,才发现在百度主页用开发工具“Console”可以看到百度的招聘信息 前端调试工具可以按F12打开,谷歌的开发工具中的Console面板可以查看错误 ...

  4. 引用类型-Array类型

    ECMAScript数组的每一项可以保存任何类型的数据,并且数组的大小是可以动态调整的. 创建数组的基本方式有两种,第一种是使用Array构造函数 var colors = new Array(); ...

  5. jQuery的Internal DSL

    JQuery的核心理念是write less,do more(写的更少,做的更多),那么链式方法的设计与这个核心理念不谋而合.那么从深层次考虑这种设计其实就是一种Internal DSL. DSL是指 ...

  6. K & DN 的前世今生（微软开源命名变革）

    一个非常有意思的 Issue:Can we rename K? 在这个 Issue 中,有大量的社区开发者讨论了微软开源命名问题,主要是 K 如何进行替换掉?看来大伙都对微软项目命名有歧义,首先,再次 ...

  7. jQuery-1.9.1源码分析系列（十三） 位置大小操作

    先列一下这些个api jQuery.fn.css (propertyName [, value ]| object )(函数用于设置或返回当前jQuery对象所匹配的元素的css样式属性值.如果需要删 ...

  8. Java进击C#——语法之面向对象

    本章简言 上一章笔者讲到关于ADO.NET相关的知识,知道了如何去访问数据库.本章将来讲关于面向对象的思想.不管在JAVA还是在C#面向对象思想的重要性都是占了一个很大的成份.往往他就像呼吸一样子,更 ...

  9. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  10. 多步骤多分步的组件StepJump

    最近的工作在做一个多步骤多分步的表单页面,这个多步骤多分步的意思是说这个页面的业务是分多个步骤完成的,每个步骤可能又分多个小步骤来处理,大步骤之间,以及小步骤之间都是一种顺序发生的业务关系.起初以为这 ...