示例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. Microsoft Office 2007 Professional Plus+ 正版密钥

    Microsoft Office 2007 Professional Plus+  正版密钥         说微软原版,自有Microsoft官方MSDN网站有关下载的校验值为证(附后).密钥安装后 ...

  2. win8\win server 2012添加【中文--美式键盘】

    1. 修改注册表 Windows Registry Editor Version 5.00 [HKEY_CURRENT_USERKeyboard Layout] [HKEY_CURRENT_USERK ...

  3. PHP学习系列(1)——字符串处理函数(3)

    11.crc32() 函数计算一个字符串的 crc32 多项式.生成 string 参数的 32 位循环冗余校验码多项式.该函数可用于验证数据的完整性. 语法:crc32(string) 注意:由于 ...

  4. Ajax 技术原理(转)

    Ajax 技术原理 2010-01-04 原文出处:http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.php 在写这篇文章之前,曾经写过一篇关于AJAX ...

  5. printk和printf的区别

    内核使用printk()打印! 应用层使用printf()打印! &&& 大部分常用的C库函数在Linux内核中都已经得到了实现.在所有没有实现的函数中,最著名的就数print ...

  6. 生产环境搭建MySQL复制的教程(转)

    [导读] 网络上有很多关于MySQL复制搭建的步骤和范例,以及手册上有一章完整的篇幅,讲述MySQL复制的原理.搭建步骤.优化等,但依然存在很多刚开始学习MySQL知识或者刚进入DBA行业的朋友咨询, ...

  7. linux awk 中 RS,ORS,FS,OFS 区别与联系【转】

    linux awk 中 RS,ORS,FS,OFS 区别与联系 http://blog.csdn.net/jesseen/article/details/7992929

  8. CA

    http://www.cmca.net/index.php?option=com_content&view=article&id=55&Itemid=16

  9. uva 714 Copying Books(二分法求最大值最小化)

    题目连接:714 - Copying Books 题目大意:将一个个数为n的序列分割成m份,要求这m份中的每份中值(该份中的元素和)最大值最小, 输出切割方式,有多种情况输出使得越前面越小的情况. 解 ...

  10. 1.Basic Structure

    配置: rsyslogd 配置通过rsyslog.conf file,典型的在/etc下.默认的, rsyslogd 读取/etc/rsyslog.conf 文件,这个可以通过命令行选项改变 注意 配 ...