方法一：

<!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. Flutter 原生TabBar切换标签页示例

    效果图: 代码如下: import 'package:flutter/material.dart'; class TabsTestPage extends StatefulWidget { _Tabs ...

  2. 【数据库开发】Redis数据库设置密码

    redis配置密码1.通过配置文件进行配置yum方式安装的redis配置文件通常在/etc/redis.conf中,打开配置文件找到 ? 1 #requirepass foobared 去掉行前的注释 ...

  3. GB和GIB的区别

    天啦撸,这么多年才知道这个东西! Gibibyte(giga binary byte)是信息或计算机硬盘存储的一个单位,简称GiB.由来“GiB”,“KiB”,“MiB”等是于1999年由国际电工协会 ...

  4. Eureka如何剔除已经宕机的节点

    同一个服务部署了多个实例,在通过网关调用时会随机调用其中一个.但是,当某个服务挂掉之后,依然在注册中心中,依然会随机被调用到,调用时便会超时报错.(主要是开发测试或者演示时需要立即将失效的从注册中心剔 ...

  5. Oracle之配置节点间相互信任机制测试

    更改一下,之前的都不对,现在来一版简单有效的ssh互信配置 例如我的是在配置rac,在grid用户下配置互信:建立好相应的文件 mkdir .ssh chmod -R 700 .ssh/ 使用ssh- ...

  6. 【JVM基础】JVM垃圾回收机制算法

  7. java多线程上篇（二） -- 进程的控制、同步

    一.进程的控制 进程的基本数据信息是操作系统控制管理进程的数据集合,这些信息就是用来控制进程的,此处我们说的进程控制就是进程的管理. 比如进程有状态,那么进程的创建.终止,状态的切换,这都不是进程自主 ...

  8. java的简单工厂模式

    目录 代码讲解 UML图解简单工厂 优点 缺点: 改进: 代码讲解 产品功能接口: /** * 定义接口,抽象出产品都具有的功能 */ interface Produce { void method( ...

  9. ubuntu 上不了网，解决方案之一

    每个人的情况可能不同,我的情况是由于强制关机网卡坏了,网络没有自动分配ip,ens33网卡没有ip,这时得手动启动命令 sudo dhclient 来自动获取ip地址.这里要感谢这篇博客,让我意识到自 ...

  10. Excel关联匹配函数

    1.=VLOOKUP (lookup_value, table_array, col_index_num, [range_lookup]) ​ lookup_value 相当于python中的键,用来 ...