【要求】：如何用 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. FileUpload上传与下载

    后台代码: public string connstr = "server=128.1.3.113;database=test;uid=sa;pwd=pass"; protecte ...

  2. [整][转]Invoke和BeginInvoke的使用

    在Invoke或者BeginInvoke的使用中无一例外地使用了委托Delegate. 一.为什么Control类提供了Invoke和BeginInvoke机制? 关于这个问题的最主要的原因已经是do ...

  3. tomcat项目发布 更改小猫图标 及自定义错误404界面

    tomcat发布项目的时候遇到些小问题 不过解决了 问题1. 整个服务器的404自定义界面问题 解决方法: 在tomcat安装目录下conf中web.xml中修改配置文件 <error-page ...

  4. DataGridView批量执行Insert和Remove行时特别慢的解决方案

    向DataGridView循环插入110条数据耗时5秒多. 在循环前执行: var oldAutoSizeRowsMode = this.AutoSizeRowsMode; var oldAutoSi ...

  5. Disaster Recovery, High Availability, and Continuous Availability - What's the Difference?

    Disaster Recovery, High Availability, and Continuous Availability - What's the Difference? Posted by ...

  6. Windows API调用外部程序

    要在应用程序中启动其他的应用程序,有3个函数可以使用,下面我一一说说他们(我以打开D:\Program Files\zeecalls\目录下的zeecalls.exe应用程序为例): 1.Winexe ...

  7. hdu 4622 Reincarnation

    http://acm.hdu.edu.cn/showproblem.php?pid=4622 用字典树把每一个字符串对应成一个整数 相同的字符串对应到相同的整数上 把所用的串对应的整数放在一个数组里 ...

  8. wScratchPad 实现刮刮卡效果

    插件网址http://wscratchpad.websanova.com/

  9. Spring中的Jdbc事务管理

    Spring提供了对事务的声明式事务管理,只需要在配置文件中做一些配置,即可把操作纳入到事务管理当中,解除了和代码的耦合. Spring声明式事务管理,核心实现就是基于Aop. Spring声明式事务 ...

  10. POJ 1845 求a^b的约数和

    题目大意就是给定a和b,求a^b的约数和 f(n) = sigma(d) [d|n] 这个学过莫比乌斯反演之后很容易看出这是一个积性函数 那么f(a*b) = f(a)*f(b)  (gcd(a,b) ...