css垂直居中方法（一）
第一种方法：首先用margin：0 auto实现水平居中，然后设置position:relative，设置top为50%（父元素高度的50%），然后设置margin-top：-150px（设置负值是因为要向上移动div，150px是div的height），代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
margin-top: -150px;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
实现效果如下：
因为div有了高度，可以给其指定overflow：auto，这样如果div中的内容太多的话，就会出现滚动条。该方法的有点在于可以不用那么多的嵌套标签，而且适用于所有的浏览器，缺点在于，如果浏览器窗口缩小到一定程度时，会div会消失
第二种方法：在上面的方法的基础上除了设置margin-top向上移动之外，还可以设置css3的transform属性也可以实现这个功能，通过设置div的transform:translateY(-50%)，意思是使得div向上平移（translate）自身高度的一半(50%)，代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 300px;
height: 300px;
background: orange;
margin: 0 auto; /*水平居中*/
position: relative;
top: 50%; /*偏移*/
transform: translateY(-50%);
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
第三种方法：使用CSS3的弹性布局（flex）的话，问题就会变得容易多了。使用CSS3的弹性布局很简单，只要设置父元素（这里是指body）的display的值为flex即可。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index</title>
<style>
html,body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
} body {
display: flex;
align-items: center; /*定义body的元素垂直居中*/
justify-content: center; /*定义body的里的元素水平居中*/
}
.content {
width: 300px;
height: 300px;
background: orange;
}
</style>
</head>
<body>
<div class="content"></div>
</body>
</html>
css垂直居中方法（一）的更多相关文章
- 最常用的css垂直居中方法
css垂直居中一直以来都是一个被大家说烂了的话题,翻来覆去的炒.不过说实话,正是因为css没有提供标准的垂直居中方法(不过在css3中已经有了相关规范),所以大家才会对它进行专门的研究.这研究来研究去 ...
- css垂直居中方法
CSS垂直居中的简便方法:{position:absolute;left:0;bottom:0;top:0;right:0;margin:auto;}.
- css垂直居中方法总结
在网页布局中,我们往往会遇到下图所示的场景,让小图标和文字对齐 可能有的小伙伴会说,这个简单,直接给小图标设置左浮动来实现. 这样做是可以的,但不推荐,毕竟浮动是会影响布局的,能少用还是少用. 以前遇 ...
- css垂直居中方法（四）
第六种方法,使用css的writing-mode属性,结合margin:auto. 参考文章:改变CSS世界纵横规则的writing-mode属性 传统的web流中,margin设置auto值的时候, ...
- css 垂直居中方法总结
工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 HTML <div class="container"& ...
- css 垂直居中方法汇总
查看原文可以有更好的排版效果哦 前言 居中是平时工作中的最常见的一种需求,各种图片居中或者各种弹窗,水平居中还好,特别是垂直居中,很多初学者表示太难写了,现在列举一些常用的方法. 实战 这里只讲述cs ...
- css垂直居中方法盘点
1.单行文字垂直居中 利用 line-height 即可轻松实现,如下示例: height:45px;line-height:45px; 2.多行文本固定高度垂直居中1 利用 display:tabl ...
- [css] 垂直居中方法
原文链接:http://www.cnblogs.com/2050/p/3392803.html 一.text-algin:center; 适用于行内元素水平居中,如图片.按钮.文字, 但是在IE67下 ...
- css垂直居中方法（二）
第四种方法: 这个方法把一些div的显示方式设置为表格,因此我们可以使用表格的vartial-align属性. 代码如下: <!doctype html> <html lang=&q ...
随机推荐
- eclipse导入redis的源码
import--c/c++ Executable 选择编译后的so文件.这样就导入工程了. 可以在eclipse直接修改c代码,重新编译后就能看到效果了. 重新编译: 1:make clean 2: ...
- VS Code快捷键
主命令框 F1 或 Ctrl+Shift+P: 打开命令面板.在打开的输入框内,可以输入任何命令,例如: 按一下 Backspace 会进入到 Ctrl+P 模式 在 Ctrl+P 下输入 > ...
- PHP使用header+Location实现网站301重定向
对于我们SEO人员来说,有的时候需要对网站进行重定向.一般来说,对网站重定向的http返回状态码是301和302两种.下面兰州SEO就通过实例来为你介绍一下怎样通过PHP使用header+Locati ...
- Memcache简介 & 内存分配机制
关于这个东西里面到底应该存放数据网上一直有很多种说法,有的说sql进行md5之后作为键值,结果作为内容存放,也有人说按照业务逻辑错放,反正是炒的不亦乐乎. 本人经过将近2 ...
- Xcode 离线文档 下载
从下面这个xml中可获取下载地址: https://developer.apple.com/library/downloads/docset-index.dvtdownloadableindex 最后 ...
- java常用封装方法
public Map<String,String> getDateByStr(String str,String startDate,String endTime){ Map<Str ...
- Python学习之路day3-函数
一.函数基础 编程方法典型的编程方法有面向过程.面向对象和函数式编程.面向过程是把编程的重点放在实现过程上,分析出结局问题所需的步骤过程,然后通过语句来一一定义实现.面向对象是把构成问题的事务分界成若 ...
- Codeforces Round #271 (Div. 2)D(递推，前缀和)
很简单的递推题.d[n]=d[n-1]+d[n-k] 注意每次输入a和b时,如果每次都累加,就做了很多重复性工作,会超时. 所以用预处理前缀和来解决重复累加问题. 最后一个细节坑了我多次: print ...
- 浅学soap--------4
引入nusoap Service.php //运行该文件,在网页中wsdl点击,可浏览生成的wsdl代码;网页提供注册的方法 <?php require_once ("nusoap/n ...
- Django之用户认证系统分析
Django自带一个用户认证系统,这个系统处理用户账户.组.权限和基于cookie的会话,下面将通过分析django源码的方式仔对该系统进行详细分析 1. 用户模型 在django.contrib.a ...