文字以及div水平垂直居中.md

<div class=”content”>
<div class=”mydiv”>
huangyingnin!
</div>
</div>

文字居中

水平居中text-align: center;

.mydiv{
text-align: center;
}

垂直居中
vertical-align: middle;

.mydiv{
height:400px;
text-align: center;
vertical-align: middle;
line-height: 400px;
}

div垂直居中

.mydiv{
text-align: center;
position:absolute;
width:300px;
height:200px;
left:50%;
top:50%;
margin:-100px 0 0 -150px;
}

使用js

$(window).resize(function(){
$(“.mydiv”).css({
position: “absolute”,
left: ($(window).width() - $(“.mydiv”).outerWidth())/2,
top: ($(window).height() - $(“.mydiv”).outerHeight())/2
});
}); $(function(){

$(window).resize();

});

文字以及div水平垂直居中的更多相关文章

  1. 如何让div水平垂直居中

    引子 我们经常遇到需要把div中的内容进行水平和垂直居中.所以,这里介绍一种方法,可以使div水平居中和垂直居中. 代码: <!DOCTYPE html> <html lang=&q ...

  2. 【笔记】让DIV水平垂直居中的两种方法

    今天写的了百度前端学院春季班的任务:定位和居中问题  由于距离上次学习CSS有点久远了,加上以前木有记笔记的习惯,方法忘得只剩下一种,今天通过网上查阅资料总结了以下两种简单的方法让DIV水平垂直居中. ...

  3. DIV水平垂直居中的CSS兼容写法

    DIV水平垂直居中,非IE浏览器可以用CSS3来处理,IE浏览器中分别处理IE6和/IE7.IE8.IE9. 在IE低版本中,虽然大致上没有问题,但还是有一些细微的显示问题. 示例如下: <!D ...

  4. Div水平垂直居中的三种方法

    百度了很多种方法,很多是不起作用的.下面这些方法是我亲自试过的.希望对大家有帮助! 下面是一波代码水军. <!DOCTYPE html> <html lang="en&qu ...

  5. scss : div水平垂直居中

    scss 是一个很好用的css预处理语言,有很多很好的特性. 比如 mixin. 我们可以像使用函数那样使用mixin. 比如写一个div水平垂直居中. 上代码. @mixin absolute_ce ...

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

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

  7. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  8. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  9. 如何将一个div水平垂直居中?4种方法做推荐

    方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 兼容性:,IE7及之前版本不支持 div{ width: 200px; height: 200px; backg ...

随机推荐

  1. context-param和init-param区别

    转载 http://www.cnblogs.com/hzj-/articles/1689836.html <context-param>的作用:web.xml的配置中<context ...

  2. 三角形div的原理

    三角形div原理 首先我们写一个正常的方形div样式,但是我们把它的宽度和高度都设置为零,并且边框线设置的粗一点: { width:0px: height:0px; Border:20px solid ...

  3. C# ip hash算法实现ip分流

    private void button42_Click(object sender, EventArgs e) { Dictionary<int, string> proxyIpNodes ...

  4. 【Android - 进阶】之自定义视图浅析

    1       概述 Android自定义View / ViewGroup的步骤大致如下: 1) 自定义属性: 2) 选择和设置构造方法: 3) 重写onMeasure()方法: 4) 重写onDra ...

  5. Java 加密 AES 对称加密算法

    版权声明:本文为博主原创文章,未经博主允许不得转载. [AES] 一种对称加密算法,DES的取代者. 加密相关文章见:Java 加密解密 对称加密算法 非对称加密算法 MD5 BASE64 AES R ...

  6. 移动Web开发图片自适应两种常见情况解决方案

    本文主要说的是Web中图片根据手机屏幕大小自适应居中显示,图片自适应两种常见情况解决方案.开始吧 在做配合手机客户端的Web wap页面时,发现文章对图片显示的需求有两种特别重要的情况,一是对于图集, ...

  7. js 字符及字符串

    1. 判断是否为null或者空字符 var == null var == undefined var == '' 2. 字符串及其分割 var arr = new Array(); //定义一数组 a ...

  8. 用ModelSim仿真SDRAM操作

    之前写了两篇关于Modelsim仿真的blog,其中模块管脚的命名可能让人觉得有些奇怪,其实不然,之前的两篇内容都是为了仿真SDRAM操作做铺垫的. 由于SDRAM的仿真过程相对比较复杂,也比较繁琐. ...

  9. react 学习之十月之思

    学习新技术,最怕的莫过于自己抱着莫大的决心去学习,然发现没有学到东西,这是很可怕的事情,但是能坚持下去,一点一点的消化知识点,并且去理解它是什么?有什么用?该怎么去用?使用的时候需要注意些什么呢? 这 ...

  10. Nullable类型和HashSet<T>集合

    今天接触到两个新的类型,查了一下才发现它们已经出现好久了,特作一下标记 Nullable结构 在System命名空间下,在 .NET Framework 2.0 版中是新增的:用它定义的值类型的对象与 ...