方法一：

<!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. MySQL初始化脚本mysql_install_db使用简介及选项参数

    mysql_install_db是一个默认放在.../mysql/scripts的一个初始化脚本. 该脚本可以在任何装有perl的操作系统上被使用,在5.6.8之前的版本,该脚本是一个shell脚本, ...

  2. 最新 美团java校招面经 （含整理过的面试题大全）

    从6月到10月,经过4个月努力和坚持,自己有幸拿到了网易雷火.京东.去哪儿.美团等10家互联网公司的校招Offer,因为某些自身原因最终选择了美团.6.7月主要是做系统复习.项目复盘.LeetCode ...

  3. Codis的安装配置

    codis是分布式redis解决方案 centos系统下安装codis需要安装相关的依赖,将图中的依赖上传至centos系统中 依次进行安装: 一.go环境的安装配置 解压到install目录下: . ...

  4. JAVA第09次实验（IO流）

    JAVA第09次实验(IO流) 0.字节流与二进制文件 我的代码 import java.io.DataInputStream; import java.io.DataOutputStream; im ...

  5. Java面试 - final、finally、finalize的区别？

    final:用于声明属性, 方法和类,分别表示属性不可变.方法不可覆盖.被其修饰的类不可继承. finally:异常处理语句结构的一部分,表示总是执行. finalize:Object 类的一个方法, ...

  6. 工作总结---CTO（张王岩）的笔记--

    1. 语言的基础:  变量.控制语句.方法 .数组 2. 面向对象  OOP 3. 容器  存储数据.分析数据  介绍[IO  File   字节流    字符流  CommonsIO] input  ...

  7. pthread_mutexattr_t设置的相关函数及其说明

    基本概述 该函数用于C函数的多线程编程中,互斥锁的初始化. 头文件:#include <pthread.h> 函数原型: int pthread_mutex_init(pthread_mu ...

  8. Python_OpenCV视频截取并保存

    在图像处理之前,我们需要对拿到手的数据进行筛选,对于视频,我们需要从中截取我们需要的一段或几段 整体思路比较简单,通过设定截取视频的起止时间(帧数),可以将该时间段内的图像保存为新的视频 直接上代码: ...

  9. php去掉字符串中的最后一个字符和汉字

    ###php去掉字符串中的最后一个字符和汉字 1.php去掉字符串中的最后一个字符: //方法一: $newstr = substr($str,0,strlen($str)-1); //方法二: $n ...

  10. Excel逻辑运算函数

    Excel逻辑运算函数 1.FALSE和TRUE的使用 ​ 筛选出表中salary>6.gender为男.age>28至少满足这三个条件中的两个的数据 1.依次使用:=C2>6.=D ...