CSS实现DIV水平 垂直居中-1
水平大家都知道,一般固定宽度给个margin:0 auto;就可以了。下面实现水平垂直都居中
HTML
- <div class="parent">
- </div>
css
- html,body{
- width: 100%;
- height: 100%;
- }
- .parent{
- width: 750px;
- height: 400px;
- background: orange;
- /*水平居中*/
- margin: 0 auto;
- position: relative;
- top: 50%;
- margin-top: -200px;/*高度的一半*/
- }
都居中了。也可以把margin-top:-200;换为CSS3新属性:transform:translateY(-50%);
CSS实现DIV水平 垂直居中-1的更多相关文章
- 【最全】CSS盒子(div)水平垂直居中居然还有这种方式
最全的CSS盒子(div)水平垂直居中布局,对CSS 布局掌握程度决定你在 Web 开发中的开发页面速度. 相对于屏幕 方法一:利用定位 <div class="box"&g ...
- css实现div水平垂直居中
中秋快到了,祝大家中秋快乐. 平时大家写bug过程中肯定会遇到让div框水平或者垂直居中,然而有时候能居中,有时候不能居中.我把平时遇到的一些方法写出来,如果对你有用,那便是晴天. 1.text-al ...
- css让div水平垂直居中
示例1: .div1{ width:200px; height:300px; border:1px solid #000; position: relative; } .div2{ width: 40 ...
- Css控制div水平垂直居中显示
<style>#info{height:0px; width:0px;top:50%; left:50%;position:absolute;}#center{background:#FF ...
- CSS控制DIV水平垂直居中
<div style="position:absolute; width: 600px; height: 200px; left: 50%; top: 50%; margin-left ...
- DIV水平垂直居中的CSS兼容写法
DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...
- Flexbox制作CSS布局实现水平垂直居中
Flexbox实现一个div元素在body页面中水平垂直居中: <!DOCTYPE html><html lang="en"><head> & ...
- 如何让div水平垂直居中
引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...
- 文字以及div水平垂直居中
文字以及div水平垂直居中.md <div class=”content”> <div class=”mydiv”> huangyingnin! </div>< ...
随机推荐
- UML类图学习
在UML类图中,常见的有以下几种关系: 泛化(Generalization), 实现(Realization),关联(Association),聚合(Aggregation),组合(Composit ...
- Android notification的使用
notification出现在通知栏中的提示,特别是在4.0以后改进了不少,这里讲得都是基于4.0及4.1以后的. 分类: 1.普通Notification 2.大布局Notification 图1 ...
- HTML Inspector – 帮助你编写高质量的 HTML 代码
HTML Inspector 是一款代码质量检测工具,帮助你编写更优秀的 HTML 代码.HTML Inspector 使用 JavaScript 编写,运行在浏览器中,是最好的 HTML 代码检测工 ...
- Windows Azure Virtual Machine (30) 修改Azure VM 的Subnet
<Windows Azure Platform 系列文章目录> 我在使用Azure Virtual Machine虚拟机的时候,常常会结合Virtual Network虚拟网络一起使用. ...
- java并发编程(2)--volatile(转)
转载:http://ifeve.com/volatile/ 作者:方 腾飞 花名清英,并发网(ifeve.com)创始人,畅销书<Java并发编程的艺术>作者,蚂蚁金服技术专家.目前工作于 ...
- BitCoinJ之Hello World示例程序
简介 比特币(BitCoin)是一种基于区块链(BlockChain)技术的数字化货币. 本文介绍了使用基于Java语言的BitCoinJ API实现一个简单的收取和支付比特币的示例程序. 开发环境 ...
- OpenJudge4980:拯救行动//stl优先队列
总时间限制: 10000ms 内存限制: 65536kB 描述 公主被恶人抓走,被关押在牢房的某个地方.牢房用N*M (N, M <= 200)的矩阵来表示.矩阵中的每项可以代表道路(@). ...
- 装饰者模式(Decorator pattern)
知识点 类应该对扩展开放,对修改封闭. 案例 (本故事纯属虚构) 某日早上,流年刚把新开发的游戏项目提交给经理 public abstract class Role { public virtual ...
- 提高生产性工具(五) - 数据的过滤器和图形化(适用于 MVC5 + MongoDB)
在下面流水账似的文章之前,先将一些感悟说一下. 1.如果一个系统对于某个功能在至少三个地方使用的话,必须将其抽象提炼出来,而且时间点最好是大规模测试之前. 2.提炼出来的功能,如果品质做得好,整个系统 ...
- ASP.NET MVC 网站开发总结(一)
历经一个多月的努力,工作室的门户网站(http://www.wingstudio.org)终于结束了内部公测. 仔细算一下,大概把网站开发出1.0版本大概用了一个月的时间(主要是利用课余时间),其后大 ...