水平大家都知道,一般固定宽度给个margin:0 auto;就可以了。下面实现水平垂直都居中

HTML

  1. <div class="parent">
  2.  
  3. </div>

css

  1. html,body{
  2. width: 100%;
  3. height: 100%;
  4. }
  5. .parent{
  6. width: 750px;
  7. height: 400px;
  8. background: orange;
  9. /*水平居中*/
  10. margin: 0 auto;
  11. position: relative;
  12. top: 50%;
  13. margin-top: -200px;/*高度的一半*/
  14. }

都居中了。也可以把margin-top:-200;换为CSS3新属性:transform:translateY(-50%);

CSS实现DIV水平 垂直居中-1的更多相关文章

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

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

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

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

  3. css让div水平垂直居中

    示例1: .div1{ width:200px; height:300px; border:1px solid #000; position: relative; } .div2{ width: 40 ...

  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. UML类图学习

    在UML类图中,常见的有以下几种关系: 泛化(Generalization),  实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...

  2. Android notification的使用

    notification出现在通知栏中的提示,特别是在4.0以后改进了不少,这里讲得都是基于4.0及4.1以后的. 分类: 1.普通Notification 2.大布局Notification 图1 ...

  3. HTML Inspector – 帮助你编写高质量的 HTML 代码

    HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...

  4. Windows Azure Virtual Machine (30) 修改Azure VM 的Subnet

    <Windows Azure Platform 系列文章目录> 我在使用Azure Virtual Machine虚拟机的时候,常常会结合Virtual Network虚拟网络一起使用. ...

  5. java并发编程(2)--volatile(转)

    转载:http://ifeve.com/volatile/ 作者:方 腾飞 花名清英,并发网(ifeve.com)创始人,畅销书<Java并发编程的艺术>作者,蚂蚁金服技术专家.目前工作于 ...

  6. BitCoinJ之Hello World示例程序

    简介 比特币(BitCoin)是一种基于区块链(BlockChain)技术的数字化货币. 本文介绍了使用基于Java语言的BitCoinJ API实现一个简单的收取和支付比特币的示例程序. 开发环境 ...

  7. OpenJudge4980:拯救行动//stl优先队列

    总时间限制:  10000ms 内存限制:  65536kB 描述 公主被恶人抓走,被关押在牢房的某个地方.牢房用N*M (N, M <= 200)的矩阵来表示.矩阵中的每项可以代表道路(@). ...

  8. 装饰者模式(Decorator pattern)

    知识点 类应该对扩展开放,对修改封闭. 案例 (本故事纯属虚构) 某日早上,流年刚把新开发的游戏项目提交给经理 public abstract class Role { public virtual ...

  9. 提高生产性工具(五) - 数据的过滤器和图形化(适用于 MVC5 + MongoDB)

    在下面流水账似的文章之前,先将一些感悟说一下. 1.如果一个系统对于某个功能在至少三个地方使用的话,必须将其抽象提炼出来,而且时间点最好是大规模测试之前. 2.提炼出来的功能,如果品质做得好,整个系统 ...

  10. ASP.NET MVC 网站开发总结(一)

    历经一个多月的努力,工作室的门户网站(http://www.wingstudio.org)终于结束了内部公测. 仔细算一下,大概把网站开发出1.0版本大概用了一个月的时间(主要是利用课余时间),其后大 ...