参考于http://www.cnblogs.com/yugege/p/5246652.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative; /*脱离文档流*/
  19.             top: 50%; /*偏移*/
  20.             margin-top: -150px;
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="content"></div>
  26. </body>
  27. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.         .content {
  14.             width: 300px;
  15.             height: 300px;
  16.             background: orange;
  17.             margin: 0 auto; /*水平居中*/
  18.             position: relative; /*脱离文档流*/
  19.             top: 50%; /*偏移*/
  20.             transform: translateY(-50%);
  21.         }
  22.     </style>
  23. </head>
  24. <body>
  25.     <div class="content"></div>
  26. </body>
  27. </html>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>index</title>
  6.     <style>
  7.         html,body {
  8.             width: 100%;
  9.             height: 100%;
  10.             margin: 0;
  11.             padding: 0;
  12.         }
  13.  
  14.         body {
  15.             display: flex;
  16.             align-items: center; /*定义body的元素垂直居中*/
  17.             justify-content: center; /*定义body的里的元素水平居中*/
  18.         }
  19.         .content {
  20.             width: 300px;
  21.             height: 300px;
  22.             background: orange;
  23.         }
  24.     </style>
  25. </head>
  26. <body>
  27.     <div class="content"></div>
  28. </body>
  29. </html>

html垂直居中的更多相关文章

  1. CSS垂直居中的11种实现方式

    今天是邓呆呆球衣退役的日子,在这个颇具纪念意义的日子里我写下自己的第一篇博客,还望前辈们多多提携,多多指教! 接下来,就进入正文,来说说关于垂直居中的事.(以下这11种垂直居中的实现方式均为笔者在日常 ...

  2. css元素水平居中和垂直居中的方式

    关于居中的问题,一直处于疑惑不解的状态,知道的几种方法好像也不是每一次都会起到作用,所以更加迷惑.主要是不清楚该 在什么情况下采用哪种解决方法,所以,整理了一些方法,梳理一下思路,做一个总结. 1. ...

  3. [css]实现垂直居中水平居中的几种方式

    转自博客 http://blog.csdn.net/freshlover/article/details/11579669 居中方式: 一.容器内(Within Container) 内容块的父容器设 ...

  4. css样式让input垂直居中

    css样式让input垂直居中 css代码: .div1{ border: 1px solid #CCC; width:1120px; height:40px; margin:auto; displa ...

  5. CSS垂直居中总结

    工作中遇到垂直居中问题,特此总结了一下几种方式与大家分享.本文讨论的垂直居中仅支持IE8+ 1.使用绝对定位垂直居中 <div class="container"> & ...

  6. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  7. CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

    一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...

  8. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  9. IE6+未知尺寸元素水平垂直居中

    首先讨论在IE8以上(也就是支持伪元素after的基础上)的2种情况 当有一段不知道长度大小的文字在你面前,你需要使它垂直居中的时候,你肯定会想到:1.text-align:center;水平居中没错 ...

  10. html文本垂直居中对齐

    html文本垂直居中对齐,代码如下: <div id="box" style="height:100px; line-height:100px; border:1p ...

随机推荐

  1. Git使用、Git配置、Git提交代码、Git上传

    非教程,只是自己的一个简单笔记.建议没有入门的朋友,直接看git的官方help文档: https://help.github.com/articles/set-up-git 1.注册一个git账号,超 ...

  2. 使用Dump转储文件排查线上环境服务未知问题

    利用Dump转储文件获取正式环境程序堆栈状态 服务异常找不到原因时,我们通常通过重新启动服务来尝试解决问题,但是在决定重启之前,请不要立刻重启Windows服务或站点 重启服务会让当前案发现场的内存证 ...

  3. numpy.squeeze()的用法

    import numpy as np x = np.array([[[0], [1], [2]]]) print(x) """x= [[[0] [1] [2]]] &qu ...

  4. Java 多线程学习笔记：生产者消费者问题

    前言:最近在学习Java多线程,看到ImportNew网上有网友翻译的一篇文章<阻塞队列实现生产者消费者模式>.在文中,使用的是Java的concurrent包中的阻塞队列来实现.在看完后 ...

  5. Selenium自动化测试Python四：WebDriver封装

    WebDriver 封装 欢迎阅读WebDriver封装讲义.本篇讲义将会重点介绍Selenium WebDriver API的封装的概念和方法,以及使用封装进行自动化测试的设计. WebDriver ...

  6. Struts框架核心工作流程与原理

    1.Struts2架构图  这是Struts2官方站点提供的Struts 2 的整体结构.  执行流程图 2.Struts2部分类介绍  这部分从Struts2参考文档中翻译就可以了. ActionM ...

  7. tomcat 配置文件server.xml 详解 Connector Engine Host Context

    目录 一 server.xml 1.1 server 配置 1.2 service 配置 1.3 Executor 1.4 Connector 配置 1.5 Engine 其他tocmat 文章 一 ...

  8. POJ2418 Hardwood Species—二叉查找树应用

    1. Hardwood Species原题描述   Time Limit: 10000MS   Memory Limit: 65536K Total Submissions: 14326   Acce ...

  9. java实现微信支付

    java实现微信支付 package com.hk.wx.pay.service.impl; @Service public class PayServiceImpl implements PaySe ...

  10. docker空间管理之清理磁盘占用

    1.docker部署后修改数据存放目录,默认存放到/var/lib/docker下面,修改到一个大的空间目录下面.参考我的另外一篇博客:https://www.cnblogs.com/cuishuai ...