【要求】:如何用 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. 318. Maximum Product of Word Lengths ——本质:英文单词中字符是否出现可以用26bit的整数表示

    Given a string array words, find the maximum value of length(word[i]) * length(word[j]) where the tw ...

  2. 在vim中执行外部命令

    11.7.5  在Vim编辑器中执行Shell命令 有时需要在Vim编辑器中执行Shell命令,例如需要验证一个Shell命令是否正确,以便写入脚本中:需要在文件中引用某个Shell命令的输入等.本小 ...

  3. ubuntu 设置静态ip

    1. 为网卡配置静态IP地址 编辑文件/etc/network/interfaces: sudo vi /etc/network/interfaces 并用下面的行来替换有关eth0的行: # The ...

  4. iOS --- 通过openURL实现APP之间跳转并传递数据

    在IOS中,实现一个应用启动另外一个应用,使用UIApplication的openURL:方法就可实现,这里以test跳到test02为例.(需要先创建这两个工程) 注册自定义URL协议(在test中 ...

  5. JavaWeb chapter 1 http协议

    1.  静态web和动态web的区别: 静态web和动态web最本质的区别是静态web是无法进行数据库操作,而动态web是可以进行数据库操作的.动态web的最大特点就是具有交互性,所谓交互性就是服务器 ...

  6. 统计类别数量并且使用pyplot画出柱状图

    从数据库中读取数据,具体操作为: # -*- coding: utf-8 -*- from numpy import * import numpy as np import pandas as pd ...

  7. Linux下的多线程编程

    1 引言 线程(thread)技术早在60年代就被提出,但真正应用多线程到操作系统中去,是在80年代中期,solaris是这方面的佼佼者.传统的 Unix也支持线程的概念,但是在一个进程(proces ...

  8. struts2 ModelDriven 和 Preparable 拦截器

    Struts2 运行流程图-1

  9. EL表达式中获取list长度

    在jsp页面中不能通过${list.size}取列表长度,而是 <%@ taglib uri="http://java.sun.com/jsp/jstl/core" pref ...

  10. mybatis多对一关联的两种方式

    第一个种是Address找到自己的user_id,扔给User,让User自己去再查一次,即使在有缓存的前提下,每遇到一个新的user_id,就会查一次,对比hibernate的话,相当于多对一eag ...