<!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. 3、发送第一个api请求

    接口地址:https://www.v2ex.com/api/topics/latest.json Method: GET Authentication: None 我们打开postman,方法选择ge ...

  2. maven-version

    <java.version>1.8</java.version><project.build.sourceEncoding>UTF-8</project.bu ...

  3. CSS3 RGBA等于RGB加上opacity吗?

    在我们前端设计里有两篇教程: CSS3 RGBA colors使用说明 css3中opacity属性学习与实践,他们公别介绍了RGBA,RGB,opacity的用法,这里我们把这三个属性放在一起来考虑 ...

  4. mybatis 处理CLOB/BLOB类型数据

    BLOB和CLOB都是大字段类型. BLOB是按二进制来存储的,而CLOB是可以直接存储文字的. 通常像图片.文件.音乐等信息就用BLOB字段来存储,先将文件转为二进制再存储进去.文章或者是较长的文字 ...

  5. mybatis中的动态SQL语句

    有时候,静态的SQL语句并不能满足应用程序的需求.我们可以根据一些条件,来动态地构建 SQL语句. 例如,在Web应用程序中,有可能有一些搜索界面,需要输入一个或多个选项,然后根据这些已选择的条件去执 ...

  6. python学习2—python3特性与各种运算符

    python学习2—python3特性与各种运算符 python3与python2相比具有的新特性 在python2中可以使用__future__模块调用python3的特性 print()函数必须带 ...

  7. sql 递归查询,刁刁的

    with cte as( select IDPlus,SuperiorsIDPlus,RoleGrade,viplevel,NAME,WeixinId from Member where IDPlus ...

  8. mysql-connetor-c 自动创建数据库、数据库表的命令

    1.首先连接MySQL默认的数据库mysql // 参数说明: // strIP: MySQL数据库的IP地址 // nPort: MySQL数据库的端口号 // strDBName: 要连接的数据库 ...

  9. IDEA快捷键(收集自网络后整理)

    快捷键 说明 CTRL+B 快速打开光标处的类或方法 CTRL+C 拷贝 CTRL+D 复制当前行到下一行 CTRL+E 最近打开的文件 CTRL+F 当前文件查找特定内容 CTRL+G 定位行 CT ...

  10. C/C++ Microsoft Visual Studio c++ DOC Home

    { // https://docs.microsoft.com/zh-cn/cpp/overview/visual-cpp-in-visual-studio?view=vs-2017 // https ...