一、在需要居中的元素加上如下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. [Android Tips] 22. Available Java 7 Features in Android

    This only allows Java 7 language features, and you can hardly benefit from anything since a half of ...

  2. haproxy para config

    .. from http://www.cnblogs.com/dkblog/archive/2012/03/13/2393321.html 常用配置选项: OPTION 选项: option http ...

  3. 天啦噜！原来Chrome自带的开发者工具能这么用你知道么！

    Chrome自带开发者工具.它的功能十分丰富,包括元素.网络.安全等等.今天我们主要介绍JavaScript控制台部分的功能. 我最早写代码的时候,也就是在JS控制台里输出一些服务器返回的内容,或者一 ...

  4. android selector 开始自定义样式

    Selector的结构描述: <?xml version="1.0" encoding="utf-8"?> <selector xmlns:a ...

  5. hdu 1556

    Color the ball Time Limit: 9000/3000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  6. 为什么要配置sdk-tools/platform-toools?

    为了方便使用Android SDK包含的开发工具,我们在系统环境变量中的Path设置Android SDK的安装目录下的tools目录. Android SDK中: platform-tools里有a ...

  7. net core 控制台中文乱码的解决方案

    net core 对控制台中文的支持需要加入下面的语句 Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);

  8. 简明外贸报价单（Price List）范本

    简明外贸报价单(Price List)范本 简明外贸报价单(Price List)范本 报价单 Price List 报价日期:年 月   日 Supplier Address 供应商 公司地址 Co ...

  9. 微信支付JsAPI

    https://pay.weixin.qq.com/wiki/doc/api/download/WxpayAPI_php_v3.zip 下载获取微信支付demo压缩包 打开压缩包,并将其中 Wxpay ...

  10. CSS水平垂直居中的方法

    原文链接:http://caibaojian.com/370.html 水平垂直居中,特别是使用在列表的时候经常会用到的,以前有需求的时候我也做过类似的代码,是使用display:table-cell ...