1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.              *{ margin: ; padding: ;}
  8.              #test{
  9.                  width: 200px;
  10.                  height: 200px;
  11.                  /*内联元素水平居中*/
  12.                  line-height: 200px;
  13.                  margin:  auto;
  14.                  text-align:center;
  15.                  background: pink;
  16.              }
  17.         </style>
  18.     </head>
  19.     <body>
  20.         <div id="test">
  21.             test
  22.         </div>
  23.     </body>
  24. </html>

2  已经知道块元素的高宽垂直方案

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.              *{ margin: ; padding: ;}
  8.          /*已知宽高的水平垂直居中方案*/
  9.         #wrap{
  10.             position: relative;
  11.             width: 150px;
  12.             height: 150px;
  13.             background: pink;
  14.             margin:  auto;
  15.         }
  16.         #inner{
  17.             position: absolute;
  18.             left: %;
  19.             top:%;
  20.             margin-left: -50px;
  21.             margin-top:-50px;
  22.             width: 100px;
  23.             height: 100px;
  24.             background: deeppink;
  25.             text-align: center;
  26.             line-height: 100px;
  27.         }
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <div id="wrap">
  32.         <div id="inner">
  33.             test
  34.         </div>
  35.         </div>
  36.     </body>
  37. </html>

3

<!--已知高度的元素水平垂直居中方案-->

<!--
绝对定位盒子的特性
高宽有内容撑开
水平方向上： left + right + width + padding + margin = 包含块padding区域的尺寸
0 0 100 0 0 400
垂直方向上： top + bottom + height + padding + margin = 包含块padding区域的尺寸
0 0 100 0 0 600
-->

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title></title>
  6.         <style type="text/css">
  7.              *{ margin: ; padding: ;}
  8.          /*已知宽高的水平垂直居中方案*/
  9.         #wrap{
  10.             position: relative;
  11.             width: 150px;
  12.             height: 150px;
  13.             background: pink;
  14.             margin:  auto;
  15.         }
  16.         #inner{
  17.             position: absolute;
  18.             left: ;
  19.             top:;
  20.             right: ;
  21.             bottom: ;
  22.             /*知识点*/
  23.             margin: auto;
  24.  
  25.             width: 100px;
  26.             height: 100px;
  27.             background: deeppink;
  28.             text-align: center;
  29.  
  30.         }
  31.         </style>
  32.     </head>
  33.     <body>
  34.         <div id="wrap">
  35.         <div id="inner">
  36.             test<br />
  37.             test<br />
  38.             test<br />
  39.             test<br />
  40.         </div>
  41.         </div>
  42.     </body>
  43. </html>

和上边图片一样，思路不一样

4<!--未知高度的元素水平垂直居中方案-->   注意！！！兼容性不好，部分浏览器不兼容

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <!--未知高度的元素水平垂直居中方案-->
  7.  
  8.         <style type="text/css">
  9.             *{
  10.                 margin: ;
  11.                 padding: ;
  12.             }
  13.             #wrap{
  14.                 position: relative;
  15.                 width: 400px;
  16.                 height: 600px;
  17.                 background: pink;
  18.                 margin:  auto;
  19.             }
  20.  
  21.             #inner{
  22.                 position: absolute;
  23.                 left: %;
  24.                 top: %;
  25.                 transform: translate3d(-%,-%,);
  26.                 background: deeppink;
  27.             }
  28.         </style>
  29.     </head>
  30.     <body>
  31.         <div id="wrap">
  32.             <div id="inner">
  33.                     testtesttesttesttesttesttest<br />
  34.                     testtesttesttesttesttesttest<br />
  35.                     testtesttesttesttesttesttest<br />
  36.                     testtesttesttesttesttesttest<br />
  37.                     testtesttesttesttesttesttest<br />
  38.                     testtesttesttesttesttesttest<br />
  39.             </div>
  40.         </div>
  41.     </body>
  42. </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. SPSS如何调用已建立的数据文件

    SPSS如何调用已建立的数据文件 调用已建立的数据文件 SPSS可以调用SPSS(*.sav),Excel(*.xls),dBASE(*.dbf),ASCII(*.dat,*.txt)等数据文件. 2 ...

  2. 网络安全系列 之 TLS/SSL基本原理

    1. TLS/SSL基本工作方式: TLS/SSL的功能实现主要依赖于三类基本算法(参见"网络安全系列 之 密码算法"): 非对称加密算法:实现身份认证和密钥协商 对称加密算法: ...

  3. nutch2.2.1+mysql抓取数据

    基本环境:linux centos6.5 nutch2.2.1 源码包, mysql 5.5 ,elasticsearch1.1.1, jdk1.7 1.下载地址http://mirror.bjtu. ...

  4. Jmeter----函数助手参数化

    要填写开始日期和结束日期和赋值的变量名

  5. pandas中axis的含义

    定义一个dataframe: >>> df a b0 1 31 2 4 现在看两种用法: 1.求行的均值 >>> df.mean(axis=1)0 2.01 3.0 ...

  6. 现代软件工程HW2：结对编程-生成五则运算式-Core10组 [PB16110698+PB16120162]

    作业具体要求点 这里 Core组要求: 1.Calc() 这个Calc 函数接受字符串的输入(字符串里就是算术表达式,例如 “5*3.5”,“7/8 - 3/8 ”,“3 + 90 * 0.3”等等) ...

  7. 2018-8-10-win10-uwp-在-Canvas-放一个超过大小的元素会不会被裁剪

    title author date CreateTime categories win10 uwp 在 Canvas 放一个超过大小的元素会不会被裁剪 lindexi 2018-08-10 19:16 ...

  8. 3、docker 容器管理

    Docker容器相对于OpenStack的云主机实例,虽然他们本质上不同.我们需要基于镜像来创建容器.容器是独立运行的一个或一组应用,以及它们的运行环境.对应的,虚拟机可以理解为模拟运行的一整套操作系 ...

  9. lnmp高人笔记

    http://www.cnblogs.com/qizekai/p/5878774.html http://www.cnblogs.com/qizekai/p/5879461.html

  10. [190308]Ubuntu 安装完之后，安装的软件小记

    install software vim sudo apt-get install -y vim Typora command copy from Typora website # or run: # ...