一、在需要居中的元素加上如下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. lua table integer index 特性

    table.maxn (table) Returns the largest positive numerical index of the given table, or zero if the t ...

  2. jq弹框确认

    function delCustomer(id,num){ var r=confirm("友情提醒:确认要删除客户吗?"); if (r==true){ $.ajax({ type ...

  3. 快速查找和你聊天人的IP和具体的物理所在地址

    附言 : 对于中秋佳节没有回家也没有外出的我,亦然选择闭关.本来是打算把这个公众号作为测试号的.但是发现这个号已经有注册有一年多了,怪可惜的!所以就用来发些教程图文,供给大家共同学习,也对自己进行不定 ...

  4. nginx----------------环境搭建遇到的一些问题汇总--（多域名配置，配置文件修改问题）

    nginx的启动命令是:(通用) /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf 重启命令: /usr/local/ng ...

  5. ElasticSearch

    ElaticSearch简介: ES是一个搜索引擎,基于当前最先进,最高效的全功能开源搜索引擎框架lucene ES还有许多功能: 分布式实时文件存储,并将每一个字段都编入索引,使其可以被搜索 近实时 ...

  6. （转）如何学习Java技术？谈Java学习之路

    51CTO编者注:这篇文章已经是有数年“网龄”的老文,不过在今天看来仍然经典.如何学习Java?本篇文章可以说也是面对编程初学者的一篇指导文章,其中对于如何学习Java的步骤的介绍,很多也适用于开发领 ...

  7. PHP 返回JSON

    有个朋友说PHP不能返回JSON对象,作为.net的我认为应该是可以的,设置一下header 就行了. 果不然,google 一下,备忘如下: <?php $result = array('Na ...

  8. Java多线程学习（二）

    一.定义产生返回值的任务 在上一篇文的介绍中,我们知道了定义任务通常的方法是定义一个实现Runnable接口的类,这个类被我们成为任务.然而也很容易注意到,任务的最重要的一个方法就是run( )方法, ...

  9. node平台截取图片模块——jimp

    前几天介绍了一个简单的截图模块——iamges,虽然简单,但是功能还是有很多局限的地方. jimp的优势:1.简单,2.支持回调方式和ES6(promise)语法也可以链式调用 3. 丰富的api   ...

  10. >Python下使用subprocess中文乱码的解决方案

    # -*- coding: CP936 -*- import subprocess cmd="cmd.exe" begin=101 end=110 while begin<e ...