<!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. EnhanceFunc__增强函数集

    想将经常用到的功能函数写在一起,花时间精心维护,然后以后就用起来就舒服很多了 目前就写了进程调试权限,远程线程注入,远程线程释放这三个函数.还有很多功能,以后慢慢加 // last code by g ...

  2. 案例 查询QC（query_cache）

    案例: 数据库版本 5.7.23 16c 64g 按月分区表,做压力测试 开启QC之前: select * from a where aa=xxx; QPS:每秒处理查询的数量 3000+ 开启之后 ...

  3. C#标准的事件模型

    事件模型的几个规范: 委托类型的名称以EventHandler结束: 委托原型返回值为void; 委托原型具有两个参数:sender表示事件触发者,e表示事件参数: 事件参数的名称以EventArgs ...

  4. python批量运行py文件

    import os path="E:\\python" #批量的py文件路径 for root,dirs,files in os.walk(path): #进入文件夹目录 for ...

  5. adostoredproc用法 因为用的少每次还得看一下代码，记下来

    {1.关闭2.清除参数(固定的可省略)3.参数赋值4.打开(或执行)如果有感知控件的话 就会显示出结果} ADOStoredProc1.close; //关闭 ADOStoredProc1.param ...

  6. USACO2007 捕牛记 /// queue+桶 oj1503

    题目大意: John和牛都站在一条直线上,开始时John位于坐标点N上( 0 ≤ N ≤ 100,000 ),牛位于坐标点K上( 0 ≤ K ≤ 100,000 ). John有两种行动方式:步行和瞬 ...

  7. Cookie自动管理

    如果想要对 cookies 干点什么就需要 HTTP Cookie 管理器了. 啥是 cookies 呢.储存在用户本地终端上的数据通常情况下,当用户结束浏览器会话 时,系统将终止所有的 Cookie ...

  8. Pytorch模型定义的三要

    首先,必须继承nn.Module这个类,要让Pytorch知道这个类是一个Module. 其次,在_init_(self)中设置需要的组件,比如(Conv,Pooling,Linear,BatchNo ...

  9. iOS进阶一OC对象的本质

    OC对象的本质 平时编写的Object-C代码,底层实现其实都是C/C++代码. 所以Objective-C的面向对象都是基于C/C++的数据结构实现的,OC对象内部可以容纳不同数据类型的数据,因此可 ...

  10. 2018-12-22-WPF-在绑定表达式添加计算

    title author date CreateTime categories WPF 在绑定表达式添加计算 lindexi 2018-12-22 16:12:56 +0800 2018-12-22 ...