<!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. java带jar编译与运行

    javac -classpath ./wxpay-sdk-0.0.3.jar HttpsTest2.java java -cp .:./wxpay-sdk-0.0.3.jar HttpsTest2

  2. hdu多校第一场 1006 （hdu6583）Typewriter dp/后缀自动机

    题意: 有个打字机,在当前字符串后新加一个字花费p,把当前字符串的一个连续子串拷贝到当前字符串的末尾花费q,给定一个字符串,求用打字机打出这个字符串的最小花费. 题解: 容易想到用dp 记dp[i]为 ...

  3. Java-Class-C：org.springframework.http.converter.StringHttpMessageConverter

    ylbtech-Java-Class-C:org.springframework.http.converter.StringHttpMessageConverter 1.返回顶部 1.1. impor ...

  4. CSS3教程:Responsive框架常见的Media Queries片段

    CSS3 Media Queries片段在这里主要分成三类:移动端.PC端以及一些常见的响应式框架的Media Queries片段.移动端Media Queries片段iPhone5@media sc ...

  5. python包下载路径

    python所有包.模块镜像站 https://www.lfd.uci.edu/~gohlke/pythonlibs/

  6. Qt5 linux下的配置

    对于用Qt开发图形界面,Qt会用到openGL的相关库文件和头文件.虽然绝大多数的linux发行版中都没有预置安装这些开发工具,但是要安装它们,也是非常简单的.用一行安装命令即可安装完毕. Debia ...

  7. spark函数sortByKey实现二次排序

    最近在项目中遇到二次排序的需求,和平常开发spark的application一样,开始查看API,编码,调试,验证结果.由于之前对spark的API使用过,知道API中的sortByKey()可以自定 ...

  8. VSCode 常用setiings.json设置

    { , , "editor.multiCursorModifier": "ctrlCmd", "editor.snippetSuggestions&q ...

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

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

  10. phonegap 开发指南系列----开始之前(1)

    在基于任何平台(安卓.ios等phonegap支持的平台)上做phonegap开发之前,需要安装 cordova 的 command-line interface (CLI) .CLI详细:http: ...