<!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. flutter 显示base64 图片

    后台返回base64 为了本地显示需要转换成Uint8List 1.导入包 import 'dart:convert';2.后台返回base64 格式不被识别需要切分 //'"data:im ...

  2. Python中的动态类

    Python中的动态类 有这样一个需求,我有SegmentReader.PostagReader.ConllReader这三个Reader,他们都继承于一个Reader类.在程序运行中,由用户通过se ...

  3. Python-爬虫-爬取知乎的标题和当页显示的文字

    # coding:utf-8 import requests from bs4 import BeautifulSoup quesNumStr = str(input("请输入搜索关键字:& ...

  4. EasyMock添加行为

    EasyMock使用expect()方法或expectLassCall()方法添加一个功能,一个模拟对象.请看下面的代码片段. 1 //add the behavior of calc service ...

  5. spark自定义函数之——UDF使用详解及代码示例

    前言 本文介绍如何在Spark Sql和DataFrame中使用UDF,如何利用UDF给一个表或者一个DataFrame根据需求添加几列,并给出了旧版(Spark1.x)和新版(Spark2.x)完整 ...

  6. 天道神诀---DHCP服务(下篇)

    DHCP作用域详解 subnet  定义一个作用域 netmask  定义作用域的掩码 range  允许发放的IP范围 option routers 指定网关地址 option domain-nam ...

  7. 关于__init__.py

    假设程序目录结构如下: ├── checkpoints/ ├── data/ │ ├── __init__.py │ ├── dataset.py │ └── get_data.sh ├── mode ...

  8. css布局-瀑布流的实现

    一.基本思路 1.先看最终的效果图: 2.实现原理:通过position:absolute(绝对定位)来定位每一个元素的位置,并且将当前列的高度记录下来方便下一个dom位置的计算 二.代码实现 1.版 ...

  9. JDBC_Template(简化代码)

    /** * @Description: TODO(这里用一句话描述这个类的作用) * @Author aikang * @Date 2019/8/27 11:03 */ /* Spring JDBC: ...

  10. java排序及泛型

    一.用泛型实现快排,可以传入不通类型进行排序,比如String数组,Integer数组. /** * 快速排序 * * @author chx * */ public class QuickSort ...