【要求】：如何用 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. 学习记录013-NFS相关知识点

    一.NFS相关知识点 1.NFS常用的路径/etc/exports NFS服务主配置文件,配置NFS具体共享服务的地点/usr/sbin/exportfs NFS服务的管理命令,exportfs -a ...

  2. spring的bean管理

    1.所有的类都可以交给Spring管理 2.如何把一个类交给bean管理? (1)配置applicationContext.xml (2)在xml中写入bean节点配置要交给bean管理的类 3.程序 ...

  3. HDU 3085 Nightmare II 双向bfs 难度:2

    http://acm.hdu.edu.cn/showproblem.php?pid=3085 出的很好的双向bfs,卡时间,普通的bfs会超时 题意方面: 1. 可停留 2. ghost无视墙壁 3. ...

  4. Redis系列-存储篇hash主要操作函数小结

    阳光透过玻璃,洒在身上,一杯暖茶在手,说不尽的安逸自得,让我有种想再写篇blog的冲动.上篇主要谈了string,这里谈谈hash吧!hash是一些列key value(field value)的映射 ...

  5. NodeJs编写小爬虫

    一,爬虫及Robots协议 爬虫,是一种自动获取网页内容的程序.是搜索引擎的重要组成部分,因此搜索引擎优化很大程度上就是针对爬虫而做出的优化. robots.txt是一个文本文件,robots是一个协 ...

  6. wp8.1 Study1： 页面导航&页面间值传递

    摘要:wp8.1与wp8中很多API是不一样了,wp8.1把以前wp7.x时的api去掉了,更多与win8.1的API相似.比如以下的页面导航和页面之间的值传递 1.页面导航 利用Frame.Navi ...

  7. Hibernate4 No Session found for current thread原因

    Hibernate4 与 spring3 集成之后, 如果在取得session 的地方使用了getCurrentSession, 可能会报一个错:“No Session found for curre ...

  8. powershell小工具，efs加解密三剑客。

    powershell  efs  加密  解密  列出  decryption  list --------前言:我编写这两个脚本的目的,大家不可不知!-------- 1 是为系统管理员,网管员编写 ...

  9. java基础之 创建对象的几种方式

    有4种显式地创建对象的方式: 1.用new语句创建对象,这是最常用的创建对象的方式. 2.运用反射手段,调用java.lang.Class或者java.lang.reflect.Constructor ...

  10. poj2129 dp

    //Accepted 320 KB 47 ms //dp //dp[i][j]=1 表示用s1的前i个,s2的前j个字符能构成s3的前i+j-1个字符 //dp[i][j]=0 表示构不成 //dp[ ...