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>< ...
随机推荐
- OpenCascade Primitives BRep - Box
OpenCascade Primitives BRep - Box eryar@163.com Abstract. BRep is short for Boundary Representation. ...
- Android入门(五)UI-单位与尺寸、ListView
原文链接:http://www.orlion.ga/453/ 一.单位与尺寸 布局文件中一共有以下单位供选择:px,pt,dp,sp px:是像素,屏幕中可见的最小元素单位. pt:是磅,1磅等于1/ ...
- 深入理解javascript作用域系列第四篇——块作用域
× 目录 [1]let [2]const [3]try 前面的话 尽管函数作用域是最常见的作用域单元,也是现行大多数javascript最普遍的设计方法,但其他类型的作用域单元也是存在的,并且通过使用 ...
- Android开发之时间日期1
对于手机的时间日期设置估计大家一定都不陌生吧,今天做了一个关于时间日期设置的小例子,其中遇到一个问题,求指导,如何使设置的时间日期和手机系统同步?还望高手指点一二. 先不说这个了,分享一下我的小例子 ...
- 《Selenium2自动化测试实战--基于Python语言》 --即将面市
发展历程: <selenium_webdriver(python)第一版> 将本博客中的这个系列整理为pdf文档,免费. <selenium_webdriver(python)第 ...
- 20个设计精致的用户界面 PSD 源文件免费下载
今天这篇文章收集了20个新鲜出炉的用户界面 PSD 源文件素材,你可以免费下载使用.这些免费素材不仅能帮助设计师们节省大量的时间,而且能有很好的效果.感谢那些很有才华的设计师分享它们的劳动成果,让更多 ...
- JAVA 设计模式 代理模式
用途 代理模式 (Proxy) 为其他对象提供一种代理以控制对这个对象的访问. 代理模式是一种结构型模式. 结构
- ElasticSearch 配置详解
配置文件位于es根目录的config目录下面,有elasticsearch.yml和logging.yml两个配置,主配置文件是elasticsearch.yml,日志配置文件是logging.yml ...
- JQuery02
一:JQuery知识点 *:JQuery的dom操作 *:动态创建dom节点 比如动态创建表格等,在js里面进行完成. *删除节点 这里面的删除就是将其放在了一个地方,并不是真的删除,之后可以使用. ...
- Razor语法中链接的一些方法
在Razor中,有HTML.ActionLink和 Url.Action来呈现链接.它们有什么区别呢.能分清了,就知道在什么情况之下使用它们了. 首先来看html.ActionLink,这个方法重载挺 ...