<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

             *{ margin: ; padding: ;}

             #test{

                 width: 200px;

                 height: 200px;

                 /*内联元素水平居中*/

                 line-height: 200px;

                 margin:  auto;

                 text-align:center;

                 background: pink;

             }

        </style>

    </head>

    <body>

        <div id="test">

            test

        </div>

    </body>

</html>

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

             *{ margin: ; padding: ;}

         /*已知宽高的水平垂直居中方案*/

        #wrap{

            position: relative;

            width: 150px;

            height: 150px;

            background: pink;

            margin:  auto;

        }

        #inner{

            position: absolute;

            left: %;

            top:%;

            margin-left: -50px;

            margin-top:-50px;

            width: 100px;

            height: 100px;

            background: deeppink;

            text-align: center;

            line-height: 100px;

        }

        </style>

    </head>

    <body>

        <div id="wrap">

        <div id="inner">

            test

        </div>

        </div>

    </body>

</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
-->

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style type="text/css">

             *{ margin: ; padding: ;}

         /*已知宽高的水平垂直居中方案*/

        #wrap{

            position: relative;

            width: 150px;

            height: 150px;

            background: pink;

            margin:  auto;

        }

        #inner{

            position: absolute;

            left: ;

            top:;

            right: ;

            bottom: ;

            /*知识点*/

            margin: auto;

            width: 100px;

            height: 100px;

            background: deeppink;

            text-align: center;

        }

        </style>

    </head>

    <body>

        <div id="wrap">

        <div id="inner">

            test<br />

            test<br />

            test<br />

            test<br />

        </div>

        </div>

    </body>

</html>

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

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

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

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

        <style type="text/css">

            *{

                margin: ;

                padding: ;

            }

            #wrap{

                position: relative;

                width: 400px;

                height: 600px;

                background: pink;

                margin:  auto;

            }

            #inner{

                position: absolute;

                left: %;

                top: %;

                transform: translate3d(-%,-%,);

                background: deeppink;

            }

        </style>

    </head>

    <body>

        <div id="wrap">

            <div id="inner">

                    testtesttesttesttesttesttest<br />

                    testtesttesttesttesttesttest<br />

                    testtesttesttesttesttesttest<br />

                    testtesttesttesttesttesttest<br />

                    testtesttesttesttesttesttest<br />

                    testtesttesttesttesttesttest<br />

            </div>

        </div>

    </body>

</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. nlp总结

    中科院nlpir和海量分词(http://www.hylanda.com/)是收费的. hanlp:推荐基于CRF的模型的实现~~要看语料,很多常用词会被分错,所以需要词库支撑.目前最友好的开源工具包 ...

  2. Aliyun 安装NPM 总是3.5.2 解决方案

    由于默认的命令 阿里云安装的 Node 是 8.x 版本 导致NPM 一直安装的都是 3.5.2 版本,死活升级不上去 最后手动安装指定版本解决 wget -qO- https://deb.nodes ...

  3. Oracle 生成sys_guid

    select sys_guid() from dual;select sys_guid() from dual connect by rownum<100

  4. 拾遗：『rhel6系列的开、关机脚本』

    一.系统脚本位置及含义 /etc/inittab./etc/init/* 存放开关机配置文件 /etc/init.d/* 服务脚本,是一个到/etc/rc.d/init.d/的软链接 /etc/rc. ...

  5. web开发者性能优化工具（一）

    web开发者性能优化工具 1   数据包嗅探器(在性能优化时,查看页面(包括页面中全部资源)的加载过程) HttpWatch (http://www.httpwatch.com/) 把网络流量用图形的 ...

  6. 剑指offer——11旋转数组中最小的数字

    题目描述 把一个数组最开始的若干个元素搬到数组的末尾,我们称之为数组的旋转.输入一个非递减排序的数组的一个旋转,输出旋转数组的最小元素.例如数组{3,4,5,1,2}为{1,2,3,4,5}的一个旋转 ...

  7. upper_bound() lower_bound() 用法

    头文件 #include<algorithm> #include<iostream>#include<vector>#include<algorithm> ...

  8. springboot整合thymeleaf手动渲染

    Thymeleaf手动渲染 为提高页面访问速度,可缓存html页面,客户端请求从缓存获取,获取不到再手动渲染 在spring4下 @Autowired ThymeleafViewResolver th ...

  9. LinkedHashMap+Spring Aop实现简易的缓存系统

    之前介绍说要做在线文库的系统,当数据量大的时候,根据标签tag的对文档信息的查询将是一个很耗时的工作,原来分析LinkedHashMap源码的时候了解到它有一个双向链表的结构,可以通过将刚被访问的元素 ...

  10. 深度探索C++对象模型之第一章：关于对象之C++对象模型

    一.C和C++对比: C语言的Point3d: 数据成员定义在结构体之内,存在一组各个以功能为导向的函数中,共同处理外部的数据. typedef struct point3d { float x; f ...