方法一：

<!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. Ajax校验--最近更新

    Ajax(Asynchronous JavaScript and Xml) 整合了JavaScript,XML,CSS,DOM,Ajax引擎(XMLHttpRequest). JavaScript语言 ...

  2. js实现随机数及随机数组

    js数组元素的随机调用 工作中网页填充数据时需要一个短语库,来拼接在短语句子后边.那就写一个js吧,放在input的keydown或keyup里边用喽. 贴代码: <SCRIPT LANGUAG ...

  3. go context源码解析

    go 的context贯穿整个goroutine的运行控制的中枢,可以实现执行的生命周期的控制. Context是一个接口,他派生了context.emptyCtx(TODO),cancelCtx,t ...

  4. Vmware中安装的Ubuntu不能全屏问题解决

    现在有了开源的vmtoll可以下载:open-vm-tools   先安装open-vm-tools:sudo  apt-get install open-vm-tools   然后安装:(不知道具体 ...

  5. 深入理解 Css3 的 clip-path

    clip-path CSS 属性可以创建一个只有元素的部分区域可以显示的剪切区域.区域内的部分显示,区域外的隐藏.clip-path属性代替了现在已经弃用的剪切 clip属性.clip-path的属性 ...

  6. 在VMware Workstation10下CentOS7虚拟机中创建与主机共享文件夹的详细步骤

    一.前言 在使用虚拟机时,常常需要与宿主计算机(以下简称为主机)操作系统交换文件,为此需要在虚拟机与主机之间建立共享文件夹. 二. 安装VMTools 要使用共享文件机制,必须首先安装VMTools. ...

  7. Python--jsonpath

    JsonPath是一种信息抽取类库,是从JSON文档中抽取指定信息的工具,提供多种原因实现保本:JavaScript/Python/PHP和Java. 使用方法如: import jsonpathre ...

  8. Python学习笔记——Python 函数

    1. 函数定义与调用 def MyFirstFunction(): print('这是我创建的第一个函数') #调用 MyFirstFunction() 这是我创建的第一个函数 2. 函数文档 def ...

  9. Hibernate之关联关系(一对多)

    今日分享hibernate框架的简单关联关系 一:关联关系简介 1.1 什么是关联关系 关联指的是类之间的引用关系.如果类A与类B关联,那么被引用的类B将被定义为类A的属性. 例如: class B{ ...

  10. Skip List（跳跃表）原理详解与实现

    ref : https://dsqiu.iteye.com/blog/1705530   本文内容框架: §1 Skip List 介绍 §2 Skip List 定义以及构造步骤   §3 Skip ...