一、在需要居中的元素加上如下C3属性即可:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .div{

            height: 330px;

            width: 330px;

            background-color: mediumspringgreen;

            border: 6px solid lightcoral;

            text-align: center;

            line-height: 330px;

            position: absolute;

            top: 50%;

            left: 50%;

            -webkit-transform: translateX(-50%) translateY(-50%);

            -moz-transform: translateX(-50%) translateY(-50%);

            -ms-transform: translateX(-50%) translateY(-50%);

            transform: translateX(-50%) translateY(-50%);

        }

    </style>

</head>

<body>

  <div class="div">上下左右居中</div>

</body>

</html>

二、只要在父级元素上面加上这三句话就可以实现不定宽高水平垂直居中:

<!doctype html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <style>

        .father{

            width: 900px;

            height: 900px;

            background-color: aqua;

            display:flex;

            justify-content:center;/*水平居中*/

            align-items:center;/*垂直居中*/

        }

        .div{

            height: 330px;

            width: 330px;

            background-color: mediumspringgreen;

            border: 6px solid lightcoral;

            text-align: center;

            line-height: 330px;

            /*position: fixed;*/

            /*top: 50%;*/

            /*left: 50%;*/

            /*-webkit-transform: translateX(-50%) translateY(-50%);*/

            /*-moz-transform: translateX(-50%) translateY(-50%);*/

            /*-ms-transform: translateX(-50%) translateY(-50%);*/

            /*transform: translateX(-50%) translateY(-50%);*/

        }

    </style>

</head>

<body>

  <div class="father">

      <div class="div">上下左右居中</div>

  </div>

</body>

</html>        
 

水平垂直居中div（css3）的更多相关文章

  1. div水平垂直居中方法及优缺点

    代码: <div class="father"> <div class="son"> </div></div> ...

  2. 【html】【10】div布局[div水平垂直居中]

    必看参考: http://www.jb51.net/css/28259.html 让div居中对齐缩写形式为: .style{margin:0 auto;} 数字0 表示上下边距是0.可以按照需要设置 ...

  3. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  4. 未知宽高div水平垂直居中3种方法

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> </head&g ...

  5. CSS水平垂直居中的几种方法2

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  6. CSS水平垂直居中的几种方法

    直接进入主题! 一.脱离文档流元素的居中 方法一:margin:auto法 CSS代码: div{ width: 400px; height: 400px; position: relative; b ...

  7. 元素水平垂直居中（transform，margin，table-cell，jQuery）

    1.水平居中 .div{ margin:0 auto; (或者 margin:auto;) width:500px; height:300px; } 2.使用margin水平垂直居中 方式一: .di ...

  8. CSS布局之-水平垂直居中

    对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.另外,文中的css都是用less书写的,如果看不懂less,可以把我给的 ...

  9. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

随机推荐

  1. 通过数据库查看EBS的登录地址

    1. SQL> SELECT home_url FROM icx_parameters; HOME_URL ------------------------------------------- ...

  2. synchronized四要素及抽象

    面向对象,java的核心思想就是面向对象编程,以贴近人类在现实生活中的思考方式,任何事物我们都会把它抽象成一个对象,一辆车,一个人,对象是我们思考的基石. 我想说的是,我们写汉字的时候,不会在脑海中命 ...

  3. 添加右键菜单命令 在此处打开命令窗口(E)(带图标)

    @color 0A @title 添加右键菜单命令 在此处打开命令窗口(^&E)(带图标) by wjshan0808 @echo off reg add HKCR\Directory\Bac ...

  4. centos7 tomcat service 自启动

    第一步: vim /lib/systemd/system/tomcat.service 第二步:复制以下代码保存退出,注意修改你的tomcat路径 [Unit] Description=tomcat ...

  5. java实现甘特图的2种方法:SwiftGantt和Jfree （转）

    http://blog.sina.com.cn/s/blog_50a7c4a601009817.html 第一种方法使用SwiftGantt实现甘特图(进度图推荐这个)   import java.a ...

  6. asp.net XMLHttpRequest 进度条以及lengthComputable always false的解决办法

    一直用ajax好长时间了,对其原理也有一些了解,最近由于项目需要,使用ajax异步进度条的效果,就研究了一下,用原生的XMLHttpRequest实现进度条函数,XMLHttpRequest有以下函数 ...

  7. http错误码大全？

    响应码由三位十进制数字组成,它们出现在由HTTP服务器发送的响应的第一行.响应码分五种类型,由它们的第一位数字表示:1.1xx:信息,请求收到,继续处理2.2xx:成功,行为被成功地接受.理解和采纳3 ...

  8. JPA in Spring

    JPA(Java Persistence API):Sun官方提出的Java持久化规范,定义了对象-关系映射(ORM)以及实体对象持久化的标准接口.Sun引入JPA出于两个原因:一.简化现有Java ...

  9. JavaScript中const、var和let区别浅析

    在JavaScript中有三种声明变量的方式:var.let.const.下文给大家介绍js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始 ...

  10. ASP.NET MVC5----基本用法

    由于之前在项目中也使用MVC进行开发,但是具体是那个版本就不是很清楚了,但是我觉得大体的思想是相同的,只是版本高的在版本低的基础上增加了一些更加方便操作的东西.下面是我学习ASP.NET MVC5高级 ...