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>< ...
随机推荐
- Office英语学习好帮手
Office提供了强大实用的英语学习助手,它可以自动翻译中英文,还可以显示详尽的解释帮助信息,当然标准的发音也是必不可少的.如何启动屏幕取词翻译功能呢?如何让office自动取词并翻译呢?如何收听单词 ...
- 05-Vue入门系列之Vue实例详解与生命周期
Vue的实例是Vue框架的入口,其实也就是前端的ViewModel,它包含了页面中的业务逻辑处理.数据模型等,当然它也有自己的一系列的生命周期的事件钩子,辅助我们进行对整个Vue实例生成.编译.挂着. ...
- 百度地图JavaScript API覆盖物旋转时出现偏移
在项目中,调用百度地图JavaScript API,做覆盖物的旋转再添加到地图上,结果出现偏移了. 调试过程中的效果图: 发现图片的旋转并不是按车子的中心来的,而是之外的一个点.最后发现犯了一个很细节 ...
- [C] C语言中的布尔值
C不具备显示的布尔类型,所以使用整数来代替,规则是:零是假,任何非零值皆为真. 反过来说,如果逻辑表达式为真其值一定为真,若逻辑表达式为假其值一定为零.
- Windows Azure Cloud Service (40) 使用VS2013的publishSettings文件,发布Cloud Service
<Windows Azure Platform 系列文章目录> 在之前的文档中,笔者已经介绍了如何使用本地证书上传至云端的方式,将本地的Cloud Service发布至云端. 在本章中,笔 ...
- Hyperledger智能合约Hello World示例程序
简介 Hyperledger是Linux 基金会主导的一个开源的区块链(BlockChain)项目. 本文介绍了一个简单的Hyperledger智能合约的开发过程. 开发环境 本文使用Docker作为 ...
- SQL Server时间粒度系列----第4节季、年时间粒度详解
本文目录列表: 1.SQL Server季时间粒度2.SQL Server年时间粒度 3.总结语 4.参考清单列表 SQL Serve季时间粒度 季时间粒度也即是季度时间粒度.一年每3 ...
- 数据结构 - Codeforces Round #353 (Div. 2) D. Tree Construction
Tree Construction Problem's Link ------------------------------------------------------------------- ...
- 使用ViewModel来实现多个Model传送至视图
在开发ASP.NET MVC时,我们会遇上这样的情形,需要一次性传送多个Model从控制器Controller至视图View. 实现很简单,只是创建一个集合类即可. Ok,下面先在数据库准备一些数据, ...
- Win8 app判断网络连接状态
Win8 app判断网络连接状态 NetworkInformation.NetworkStatusChanged += NetworkInformation_NetworkStatusChanged; ...