示例1:

.div1{
width:200px;
height:300px;
border:1px solid #000;
position: relative;
}
.div2{
width: 40px;
height:40px;
background:green;
position: absolute;
margin: auto;
top:;
left:;
right:;
bottom:;
}

示例1 css部分

<div class="div1">
<div class="div2">居中</div>
</div>

示例1 html部分

示例2:

.div3{
width:200px;
height:300px;
border:1px solid #000;
display: table-cell;
vertical-align: middle;
}
.div4{
width: 40px;
margin: 0 auto;
}

示例2 css部分

<div class="div3">
<div class="div4">居中</div>
</div>

示例2 html部分

css让div水平垂直居中的更多相关文章

  1. 【最全】CSS盒子(div)水平垂直居中居然还有这种方式

    最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...

  2. css实现div水平垂直居中

    中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...

  3. CSS实现DIV水平 垂直居中-1

    水平大家都知道,一般固定宽度给个margin:0 auto:就可以了.下面实现水平垂直都居中 HTML <div class="parent"> </div> ...

  4. Css控制div水平垂直居中显示

    <style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...

  5. CSS控制DIV水平垂直居中

    <div style="position:absolute; width: 600px; height: 200px; left: 50%; top: 50%; margin-left ...

  6. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  7. Flexbox制作CSS布局实现水平垂直居中

    Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head>  & ...

  8. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  9. 文字以及div水平垂直居中

    文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...

随机推荐

  1. 转:十条不错的编程观点。(出处:酷 壳 – CoolShell.cn)

    在Stack Overflow上有这样的一个贴子<What’s your most controversial programming opinion?>,翻译成中文就是“你认为最有争议的 ...

  2. PHP获取操作系统、IP、地理位置、浏览器、ISP等信息_PHP类代码

    PHP语言.浏览器.操作系统.IP.地理位置.ISP,本PHP类里面有以下几种方法,同时也是用法说明: <?php class class_guest_info{ function GetLan ...

  3. Symfony2源码分析——启动过程1

    本文通过阅读分析Symfony2的源码,了解Symfony2启动过程中完成哪些工作,从阅读源码了解Symfony2框架. Symfony2的核心本质是把Request转换成Response的一个过程. ...

  4. WebService实现文件上传下载

    一:服务端:一个普通java web工程 package com.wzh.file; import com.sun.xml.ws.developer.StreamingAttachment; impo ...

  5. ASP.NET 表单认证与角色授权

    参考 : http://hi.baidu.com/iykqqlpugocfnqe/item/e132329bdea22acbb6253105  ASP.NET中处理请求的流程图 http://www. ...

  6. QTableWidget 用法总结(只能使用标准的数据模型,并且其单元格数据是QTableWidgetItem的对象)

    QTableWidget是QT程序中常用的显示数据表格的空间,很类似于VC.C#中的DataGrid.说到QTableWidget,就必须讲一下它跟QTabelView的区别了.QTableWidge ...

  7. HDU5196--DZY Loves Inversions 树状数组 逆序数

    题意查询给定[L, R]区间内 逆序对数 ==k的子区间的个数. 我们只需要求出 子区间小于等于k的个数和小于等于k-1的个数,然后相减就得出答案了. 对于i(1≤i≤n),我们计算ri表示[i,ri ...

  8. MD中bitmap源代码分析--SYNC IO和RAID5的补充

    最近在做bwraid的R6的设计工作,需要调研一下bitmap下刷磁盘的IO属性(是否为SYNC IO),还有raid5中bitmap的存储和工作方式. 1.bitmap刷磁盘是否为 SYNC IO? ...

  9. MapReduce优化一(改变切片大小和Shuffle过程Reduce占用堆大小)

    /*为防止处理超大作业时超时,将io时间设为1小时         *         <property>            <name>dfs.datanode.soc ...

  10. SqlServer 自动备份、自动删除7天前备份

    -----sqlserver 数据异地备份 默认删除 七天前的数据 -----该代码可配置成SQLServer作业里做调度,或者配置成任务计划进行执行 ----挂载异地盘符 exec master.. ...