一、在需要居中的元素加上如下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. 关于JS嵌套点击事件的问题。

    $().click() 是点击命令$().click(function(){代码}) 是绑定click事件,并不会直接运行.所以在嵌套的时候就有可能出现重复绑定的问题.下面是使用jsonp跨站访问代码 ...

  2. python pymysql和orm

    pymsql是Python中操作MySQL的模块,其使用方法和MySQLdb几乎相同. 1. 安装 管理员打开cmd,切换到python的安装路径,进入到Scripts目录下(如:C:\Users\A ...

  3. spring ioc三种注入方式

    spring ioc三种注入方式 IOC ,全称 (Inverse Of Control) ,中文意思为:控制反转 什么是控制反转? 控制反转是一种将组件依赖关系的创建和管理置于程序外部的技术. 由容 ...

  4. internet选项菜单灰色

    HKEY_CURRENT_USER\Software\Microsoft\Internet Explorer”下,然后在“Internet Explorer”上单击右键,在选择“删除”.

  5. C语言堆和栈

    堆和栈的区别 一个由C/C++编译的程序占用的内存分为以下几个部分1.栈区(stack)— 由编译器自动分配释放 ,存放函数的参数值,局部变量的值等.其操作方式类似于数据结构中的栈.2.堆区(heap ...

  6. Learning From Data 第一章总结

    之前上了台大的机器学习基石课程,里面用的教材是<Learning from data>,最近看了看觉得不错,打算深入看下去,内容上和台大的课程差不太多,但是有些点讲的更深入,想了解课程里面 ...

  7. apache2.4 windows764 python cgi

    修改conf下的httpd.conf; 1:Listen和ServerName修改为相同的端口号,如8066 2:ScriptAlias就让他留在原位置,"${SRVROOT}/cgi-bi ...

  8. asp.net mvc4 MvcMusicStore

    最近危机感紧迫,总想学些东西.又因为之前mvc的知识不够系统和牢固,所以最近想系统的过一遍.自然买了两本书来看,一边看一边对比.尽量做到每个地方都过一下.今天遇到一个问题所以记一下博客. 环境:win ...

  9. Hadoop：部署Hadoop Single Node

    一.环境准备 1.系统环境 CentOS 7 2.软件环境 OpenJDK # 查询可安装的OpenJDK软件包[root@server1] yum search java | grep jdk... ...

  10. 提供一个表单，进行post数据处理

    var strContent = "aaaaa"; html.Append("<html><body><form id='postUploa ...