一、在需要居中的元素加上如下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. 微服务之Swagger

    Swagger使用 1. Swagger UI 按以下步骤配置,项目启动后访问:http://localhost:8080/swagger-ui.html 1.1 添加依赖 <dependenc ...

  2. 如何将一个Excel文件中的sheet移动到另外一个Excel？

    背景 工作中往往会有多个excel维护的情况,随着业务的变化, 将一个Excel合并到另外一个Excel,成为必须. 如何移动sheet,对于不会的人,这是一个好问题, 也许你经过多次尝试都没有成功. ...

  3. 4. Java Script 变量（untype）

    没有块级作用域 数据类型 JavaScript中有5种简单数据类型(也称为基本数据类型):Undefined.Null.Boolean.Number和String.还有1种复杂数据类型——Object ...

  4. centos7 tomcat service 自启动

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

  5. [Ubuntu] change mouse scrolling between standard and natural

    Standard: sudo vi .Xmodmap insert the content as below pointer = Natural: sudo vi .Xmodmap insert th ...

  6. (temp)catch ip

    String str = "192.168.1.100"; String[] ipStr = str.split("\\."); ]; ; i < ; i ...

  7. 关于SMBIOS

    一, 1.什么是SMBIOS? A: SMBIOS(System Management BIOS),是主板或者系统制造者以标准的格式显示产品管理信息所需遵循的统一规范.也就是不管你是怎么去实现的,结果 ...

  8. 二十一、Java基础--------IO流之综合案例分析

    前三篇文章详细介绍了IO流体系所涉及的重点内容,为了帮助理解与学习,本片博客主要是分析一个与IO操作相关的题目. 例1:在我们观看视频时经常要关注的就是视频的时间长度,在学习了IO操作之后,就可以自己 ...

  9. python学习笔记之基础二（第二天）

    1.编码转换介绍        unicode是最底层.最纯的,会根据终端的编码进行转化展示 一般硬盘存储或传输为utf-8(因为省空间.省带宽),读入内存中为unicode,二者如何转换 a = ' ...

  10. 浅谈Scrapy爬虫（一）

    以下谈论的 scrapy 基于 0.20.2 版本(当前最新版本是 0.22.0 ),python 2.7.6. 开发环境是windows 7 sp1.   互联网上比较有价值的参考资料 1. Scr ...