文字以及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. Redis_基本类型介绍和指令___2

    1.hash Redis hash 是一个string类型的field和value的映射表,hash特别适合用于存储对象. Redis 中每个 hash 可以存储 232 - 1 键值对(40多亿). ...

  2. 关于css中z-index 的应用

    我想很多人在应用中的会碰到这个问题,设置 z-index无效:无论设置为多高的数字都没有效果: 原因是在设置z-index之前必须满足一下两个条件: 1,给设置z-index的元素设置相应的定位值,p ...

  3. 【C++】第 1 章:C++基础知识

    C++历史简介 1.Java和C#语言都是从C++继承而来的.简而言之,要成为专业的编程人员就意味着要深刻理解C++.它是现代编程的基础. C:现代编程时代的开始 1.C语言的发展经历了20世纪60年 ...

  4. InnoDB的redo日志管理---饶珑辉

    http://raolonghui.com/2015/06/24/innodb%E7%9A%84redo%E6%97%A5%E5%BF%97%E7%AE%A1%E7%90%86/#comment-11

  5. 标准I/O库之临时文件

    ISO C标准I/O库提供了两个函数以帮助创建临时文件. #include <stdio.h> char *tmpnam( char *ptr ); 返回值:指向唯一路径名的指针 FILE ...

  6. 【转】如何高效利用GitHub——2013-08-28 22

    http://www.yangzhiping.com/tech/github.html  正是Github,让社会化编程成为现实.本文尝试谈谈GitHub的文化.技巧与影响. Q1:GitHub是什么 ...

  7. Android5.0之NavigationView的使用

    导航菜单的制作方式多种多样,网上也有各种炫酷效果的具体实现方式,那么今天我主要是想来说说Google在Android5.0之后推出的NavigationView的具体使用方式. NavigationV ...

  8. 纯js写图片轮播插件

    最近终于写成了自己创作的图片轮播插件,使用原生js编写.与目前网上流行的轮播插件相比,功能和效果稍弱,但是使用起来相当方便. 先看html代码 <!DOCTYPE html> <ht ...

  9. C# ado.net 使用 row_number over() 简单的分页示例

    /// <summary> /// 获取Paging列表 /// </summary> public List<HousesAgentEntity> GetPage ...

  10. asp.net 开发问题:Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值。

    "Web 服务器上的请求筛选被配置为拒绝该请求,因为内容长度超过配置的值." 这个问题在开发需要上传文件的时候可能会遇到,今天遇到这个问题,百度过也有挺多的修改方法. 方法1: 修 ...