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>< ...
随机推荐
- JAVA实现Excel的读写--jxl
前段时间因为开发网站的需要,研究了一下java实现excel的读写,一般当我们做管理软件时,都需要打印报表,报表如何制作呢?相信一定难为过大家,本篇就为大家揭开它的神秘面纱,学习完半篇,你一定会对报表 ...
- SQL 语句中union all和order by同时使用
最近做的一个财物管理系统中查询过期或逾期的存储过程,返回 “财物所属的案件名称”,“财物名称”,“财物编号”,“过期或逾期时间”(超期或逾期前7天开始预警). 遇到“union all ...
- Angularjs中link函数参数含义小节
restrictE: 表示该directive仅能以element方式使用,即:<my-dialog></my-dialog>A: 表示该directive仅能以attribu ...
- 动态分配的顺序线性表的十五种操作—C语言实现
线性表 定义:是最常用的,也是最简单的数据结构,是长度为n个数据元素的有序的序列. 含有大量记录的线性表叫文件 记录:稍微复杂的线性表里,数据元素为若干个数据项组成,这时把一个数据元素叫记录 结构特点 ...
- SpaceBase – 基于 Sass 的响应式 CSS 框架
SpaceBase 是一个基于 Sass 的响应式 CSS 框架.SpaceBase 是可以在建立和定制您的需要的一个样板层,它结合最佳实践为今天的响应式网页与我们对每一个项目中使用的核心组件. 在线 ...
- jQuery.Deferred 源码分析
作者:禅楼望月(http://www.cnblogs.com/yaoyinglong ) 1 引子 观察者模式是我们日常开发中经常用的模式.这个模式由两个主要部分组成:发布者和观察者.通过观察者模式, ...
- webstom设置和monokia配色方案
首先,最后配色结果如下: 本次配色参考几个文档: http://frontenddev.org/article/webstorm-portal-1-subject-and-match-colors.h ...
- 基于HT的CSG功能构建HTML5的3D书架
构造实体几何CSG全称Constructive solid geometry,是3D计算机图形学中构建模型的常用技术,可通过合并Union.相减Subtraction和相交Intersction的三种 ...
- ASP.NET MVC必知必会知识点总结(二)
一.实现Controller的依赖注入: 1.自定义继承DefaultControllerFactory 类的控制器工厂类并重写GetControllerInstance方法:(如:InjectCon ...
- SQL Server时间粒度系列----第2节日期、周时间粒度详解
本文目录列表: 1.从MySQL提供的TO_DAYS和FROM_DAYS这对函数说起2.SQL Server日期时间粒度3.SQL Server周有关时间粒度 4.总结语 5.参考清单列表 从My ...