CSS 实现：元素相对于文档水平垂直居中
【要求】：如何用 CSS 实现水平/垂直居中一个元素（相对于文档）
<body>
<div class="content"></div>
</body>
【实现】：
① margin + 相对定位（relative)
// html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式（margin:0; padding:0）
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 200px;
height: 200px;
background: #0f0;
margin: 0 auto; // 水平居中
position: relative; // 相对于自身静态位置进行定位
top: 50%; // 向下偏移 body 高度的50%
transform: translateY(-50%); // 向上偏移自身高度的 50%
}
② 不使用 margin，只用相对定位（relative)
// html 和 body 的高度默认为0，因此要先设置为100%，并且清除默认样式（margin:0; padding:0）
html, body {
height: 100%;
margin: 0;
padding: 0;
}
.content {
width: 200px;
height: 200px;
background: #0f0;
position: relative; // 相对于自身静态位置进行定位
top: 50%; // 向下偏移 body 高度的50%
left: 50%; // 向左偏移 body 宽度的50%
transform: translate(-50%, -50%); // 向上/左偏移自身高度/宽度的 50%
}
♫ 注意，实现二中的 transform 不能分开写，类似于下面这样，这样后写的 transform 会覆盖先写的，将导致只能实现一处偏移。
top: 50%;
left: 50%;
transform: translateX(-50%);
transform: translateY(-50%);
③ 使用 absolute + margin: auto;
html, body {
height: 100%;
margin: 0;
padding: 0;
position: relative;
}
.content {
width: 200px;
height: 200px;
background: #0f0;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
效果预览
CSS 实现：元素相对于文档水平垂直居中的更多相关文章
- HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法
块级元素div分析 1.外边距 margin 2.内边距 padding 3.边框 border Div的真实宽度=width+margin-left+margin-right+border*2+ ...
- 关于css浮动框是否脱离文档流的分析
在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...
- jquery的相对父元素和相对文档定位示例代码
在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...
- 前端css盒模型及标准文档流及浮动问题
1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...
- elk 概念整理 集群状态 - yellow - 面试的问题 -- 官方配置文档 水平扩容以及数据保障
1. primary shard -- raid0 2.replicas shard -- raid1 3.index -- 图书馆的借书指引 4.MySQL vs elasticsearch # ...
- css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）
实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...
- [Web 前端] CSS篇之3. 如何保持浮层水平垂直居中
原文链接](http://www.cnblogs.com/yaliu/p/5190957.html) 浮层水平垂直居中方法 (一)利用绝对定位与transform <div class=&quo ...
- CSS（九）：设置盒子水平垂直居中
通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...
- css实现高度不固定的div元素模块在页面中水平垂直居中
<!DOCTYPE html><html> <head> <title>Laravel</title> <link ...
随机推荐
- synchronized和static synchronized的比较
群里讨论的一个问题,网上别人已经贴出了很详细的说明,这里补充记录下,后面加入个人测试代码. 起因:1月份的时候看群里讨论一道问题,问题内容如下: 一个日本作者-结成浩的<java多线程设计模式& ...
- Skrollr.js -- 使用Skrollr创建视差滚动效果页面
使用方法: http://www.helloweba.com/view-blog-262.html http://www.uedsc.com/skrollr.htmlhttp://www.hello ...
- jdk、jre、jvm的关系
JDK里面的工具也是用JAVA编写的,它们本身运行的时候也需要一套JRE,如C:\Program Files\Java\jdk1.5.x\目录下的JRE.而C:\Program Files\Java\ ...
- Qml一些技巧
1.从ListView中获取当前选中项 myList.currentItem.children[0].text 可以获取ListView的选择项的一个个元素.注意children的使用.
- Assert断言测试
assert编写代码时,我们总是会做出一些假设,断言就是用于在代码中捕捉这些假设,可以将断言看作是异常处理的一种高级形式.断言表示为一些布尔表达式,程序员相信在程序中的某个特定点该表达式值为真.可以在 ...
- 二模 （8） day2
第一题: 题目描述: 有 n 个炸弹,有些炸弹牵了一根单向引线(也就是说引线只有在这一端能被炸弹点燃),只要引爆了这个炸弹,用引线连接的下一个炸弹也会爆炸.每个炸弹还有个得分,当这个炸弹被引爆后就能得 ...
- jQuery 其他操作
1. 样式操作 1.1 获取 class 和设置 class : class 是元素的一个属性, 所以获取 class 和设置 class 都可以使用 attr() 方法来完成. 1.2 追加样式: ...
- include指令和<jsp:include>标准动作
利用JSP的包含机制,可以有效的避免重复,把可重用的部分独立出去,使用include把它们包含到当前文件.JSP有两种包含机制:include指令和<jsp:include>标准动作. 1 ...
- redis2.8--c/s架构流程
- Codeforces Round #326 (Div. 2)-Duff in Love
题意: 一个数x被定义为lovely number需要满足这样的条件:不存在一个数a(a>1),使得a的完全平方是x的因子(即x % a2 != 0). 给你一个数n,求出n的因子中为love ...