【要求】：如何用 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 实现：元素相对于文档水平垂直居中的更多相关文章

  1. HTML+CSS基础 块级元素div分析 文档流 脱离文档流的方法

    块级元素div分析 1.外边距  margin 2.内边距 padding 3.边框  border Div的真实宽度=width+margin-left+margin-right+border*2+ ...

  2. 关于css浮动框是否脱离文档流的分析

    在了解浮动属性之前,首先我们先了解一下html中关于display属性的相关知识. display属性常用的有inline, block, inline-block. inline也就是内联的意思. ...

  3. jquery的相对父元素和相对文档定位示例代码

    在开发jquery时候经常需要用到定位,有相对父元素定位和相对文档定位,本文为此总结下,有需要的朋友可以参考下 在开发jquery时候经常需要用到定位,这里概括两种定位: 1.相对父元素定位: $(& ...

  4. 前端css盒模型及标准文档流及浮动问题

    1.盒模型 "box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和IE模型.这里重 ...

  5. elk 概念整理 集群状态 - yellow - 面试的问题 -- 官方配置文档 水平扩容以及数据保障

    1. primary shard   -- raid0 2.replicas shard -- raid1 3.index -- 图书馆的借书指引 4.MySQL vs elasticsearch # ...

  6. css图片垂直水平居中及放大(实现水平垂直居中的效果有哪些方法？）

    实现水平垂直居中方法有很多种: 一.万能法: 1.已知高度宽度元素的水平垂直居中,利用绝对定位和负边距实现. <style type="text/css"> .wrap ...

  7. [Web 前端] CSS篇之3. 如何保持浮层水平垂直居中

    原文链接](http://www.cnblogs.com/yaliu/p/5190957.html) 浮层水平垂直居中方法 (一)利用绝对定位与transform <div class=&quo ...

  8. CSS（九）：设置盒子水平垂直居中

    通过设置下面的样式可以使盒子水平垂直居中: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  9. css实现高度不固定的div元素模块在页面中水平垂直居中

    <!DOCTYPE html><html>    <head>        <title>Laravel</title> <link ...

随机推荐

  1. [转]RAID技术介绍和总结

    以下内容转自伯乐在线:http://blog.jobbole.com/83808/ 原文出处: 涯余(@若东临于沧海) ---------------------------------------- ...

  2. hibernate generator class=xxx id详解

    <id>元素中的<generator>用来为该持久化类的实例生成唯一的标识,hibernate提供了很多内置的实现.Increment:由hibernate自动递增生成标识符, ...

  3. MongoDb系列

    这个系列主要总结学习MongoDb过程中的一些经验. 简单介绍及环境搭建 常用命令 C#驱动及应用 管理工具MongoVUE使用

  4. HDU 3567 Eight II 打表,康托展开,bfs,g++提交可过c++不可过 难度:3

    http://acm.hdu.edu.cn/showproblem.php?pid=3567 相比Eight,似乎只是把目标状态由确定的改成不确定的,但是康托展开+曼哈顿为h值的A*和IDA*都不过, ...

  5. $lookup

    db.orders.aggregate([ { $lookup: { from: "inventory", localField: "item", foreig ...

  6. 【模拟题(电子科大MaxKU)】解题报告【树形问题】【矩阵乘法】【快速幂】【数论】

    目录: 1:一道简单题[树形问题](Bzoj 1827 奶牛大集会) 2:一道更简单题[矩阵乘法][快速幂] 3:最简单题[技巧] 话说这些题目的名字也是够了.... 题目: 1.一道简单题 时间1s ...

  7. Right-BICEP 测试四则运算二程序

    测试方法: Right-BICEP 测试计划: 1.Right-结果是否正确? 2.B-是否所有的边界条件都是正确的? 3.是否有乘除法? 4.是否有括号? 5.是否有输出方式? 6.是否可以选择出题 ...

  8. asp.net 代码 注意点

    1. 模糊查询时,注意要去掉空格 前台: <input id="txtQJBH" type="text" runat="server" ...

  9. namenode 无法启动之每次开机需要重新格式化-tmp

    最近遇到了一个问题,执行start-all.sh的时候发现JPS一下namenode没有启动        每次开机都得重新格式化一下namenode才可以        其实问题就出在tmp文件,默 ...

  10. 加强版for循环

    /*加强版for循环 * 5.0以后有加强版for循环 * for(String name:nameArray){} * 1.String name:声明会带有数组单一元素的循环变量 *   数组元素 ...