方法一：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div1{

                width:300px;

                height:300px;

                background-color: skyblue;

                position: relative;

            }

            p{

                width:100px;

                height: 100px;

                position:absolute;

                left: 0;

                right: 0;

                top: 0;

                bottom: 0;

                margin:auto;

                background-color: red;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <p></p>

        </div>

    </body>

</html>

方法二：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div1{

                width:300px;

                height:300px;

                background-color:skyblue;

                position: relative;

            }

            p{

                width:100px;

                height:100px;

                background-color: red;

                position: absolute;

                top: 50%;

                left: 50%;

                margin-top:-50px;

                margin-left:-50px;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <p></p>

        </div>

    </body>

</html>

方法三：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>index</title>

    <style>

        div {

            display: table-cell;

            width: 200px;

            height: 200px;

            text-align: center;

            vertical-align: middle;

            border: 1px solid #F00;

        }

    </style>

</head>

<body>

    <div>

        <p>123nonosfnfon</p>

    </div>

</body>

</html>

方法四：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div1{

                width:300px;

                height:300px;

                background-color:skyblue;

                overflow: hidden;

            }

            p{

                width:100px;

                height:100px;

                background-color: red;

                margin:0 auto;

                position:relative;

                top:50%;

                margin-top:-50px;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <p></p>

        </div>

    </body>

</html>

方法五：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div1{

                width:300px;

                height:300px;

                background-color:skyblue;

            }

            p{

                width: 100px;

                height: 100px;

                background: red;

                margin: 0 auto; /*水平居中*/

                position: relative;

                top: 50%; /*偏移*/

                transform: translateY(-50%);

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <p></p>

        </div>

    </body>

</html>

方法六：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            #div1{

                width:300px;

                height:300px;

                background-color:skyblue;

                display: flex;

                display: -webkit-flex;

                align-items: center;

                justify-content: center; 

            }

            p{

                width: 100px;

                height: 100px;

                background: red;

            }

        </style>

    </head>

    <body>

        <div id="div1">

            <p></p>

        </div>

    </body>

</html>

如果你还有其他的方法欢迎在下评论

css一个元素垂直居中的6种方法的更多相关文章

  1. css如何实现垂直居中（5种方法）

    css如何实现垂直居中(5种方法) 一.总结 一句话总结:行内只需要简单地把 line-height 设置为那个对象的 height 值就可以使文本居中了. 块的话可以尝试 margin:auto: ...

  2. [转]-CSS 元素垂直居中的6种方法

    原文地址:http://blog.zhourunsheng.com/2012/03/css-%E5%85%83%E7%B4%A0%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD ...

  3. CSS 元素垂直居中的 6种方法

    利用CSS进行元素的水平居中,比较简单,行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.本文收集了六种利用css进 ...

  4. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. 使用CSS完成元素居中的七种方法

    在网页布局中元素水平居中比元素垂直居中要简单不少,同时实现水平居中和垂直居中往往是最难的.现在是响应式设计的时代,我们很难确切的知道元素的准确高度和宽度,所以一些方案不大适用.据我所知, 在CSS中至 ...

  7. css设置元素垂直居中的几个方法

    最近有人问我怎么设置元素垂直居中?我....(这么基础的东西都不会?我有点说不出话来),  不过还是耐心的教了他几个方法,好吧教完他们,顺便把这些方法整理一下 第一种:通过设置成为表格元素的方式来实现 ...

  8. 【翻译】CSS水平和垂直居中的12种方法

    英语原文链接 在CSS中有许多不同的方法能够做到水平和垂直居中,但很难去选择合适的那个.我会向你展示我所看到的所有的方法,帮助你在所面对的情境下选择最棒的那一个. 方法1 此方法将只能垂直居中单行文本 ...

  9. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

随机推荐

  1. iOS-UIView的layoutSubviews和drawRect方法何时调用（转）

    转自:http://jianyu996.blog.163.com/blog/static/112114555201305113018814/ 首先两个方法都是异步执行.layoutSubviews方便 ...

  2. CEIWEI USBMonitor监控驱动 OCX/SDK USB 监控精灵 USB过滤驱动

    CEIWEI USBMonitor监控精灵软件SDK USBMonitorX.dll SDK,能够嵌入到你的App程序中,从而在你的App中实现USB端口协议分析.调试USB设备的协议信息,并可以拦截 ...

  3. CTF 专用文件监控系统

    # -*- coding: utf-8 -*-#use: python file_check.py ./ import osimport hashlibimport shutilimport ntpa ...

  4. hdu 1106

    排序 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submissi ...

  5. 论文阅读 | Transformer-XL: Attentive Language Models beyond a Fixed-Length Context

    0 简述 Transformer最大的问题:在语言建模时的设置受到固定长度上下文的限制. 本文提出的Transformer-XL,使学习不再仅仅依赖于定长,且不破坏时间的相关性. Transforme ...

  6. oracle导入.dmp脚本

    一.更改数据库管理员sys/system密码 1.运行到C盘根目录 2.输入:SET ORACLE_SID = 你的SID名称 3.输入:sqlplus /nolog 4.输入:connect /as ...

  7. 转载：微信开放平台开发第三方授权登陆（二）：PC网页端

    微信开放平台开发第三方授权登陆(二):PC网页端 2018年07月24日 15:13:32 晋文子上 阅读数 12644更多 分类专栏: 微信开发 第三方授权登录   版权声明:本文为博主原创文章,遵 ...

  8. python 虚拟环境 venv 简单用法

    Python3.3以上的版本通过venv模块原生支持虚拟环境,可以代替Python之前的virtualenv.该venv模块提供了创建轻量级“虚拟环境”,提供与系统Python的隔离支持.每一个虚拟环 ...

  9. php 配置微信公众号

    首先你要在微信公众号官网申请一个公众号,然后登录进去 在网页的左下方找到开发的基本配置 就可以开始配置服务器下面的东西了 点击打开成这个样子的 就是一些参数,url填写你自己服务器的具体地址就好了,我 ...

  10. 整理一下rmq

    rmq(int i,int j,int a)表示查询a数组i到j区间的内容中的最大/最小值核心部分为二分区间以及st预处理算法 先说st预处理算法吧 int dp[i][j];//表示以i开始 长度为 ...