利用绝对定位实现的居中

代码如下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>居中</title>

        <style type="text/css">

            *{

                padding: 0px;

                margin: 0px;

            }

            body {

                height: 100%;

                overflow: hidden;

            }

            .father{

                position: absolute;

                height: 500px;

                width: 100%;

                background-color:#2AABD2;

            }

            .children{

                position: absolute;

                top: 50%;

                left: 50%;

                background-color: red;

                width: 100px;

                height: 100px;

                margin: -50px 0 0 -50px;

            }

        </style>

    </head>

    <body>

        <div class="father">

            <div class="children">

            </div>

        </div>

    </body>

</html>

效果图如下：

利用flex垂直居中

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>居中</title>

        <style type="text/css">

            *{

                padding: 0px;

                margin: 0px;

            }

            body {

                height: 100%;

                overflow: hidden;

            }

            .father{

                height: 500px;

                width: 100%;

                background-color:#2AABD2;

                display: flex;

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

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

            }

            .children{

                background-color: red;

                width: 100px;

                height: 100px;

            }

        </style>

    </head>

    <body>

        <div class="father">

            <div class="children">

            </div>

        </div>

    </body>

</html>

效果图如下：

transform+relative实现的居中

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>居中</title>

        <style type="text/css">

            *{

                padding: 0px;

                margin: 0px;

            }

            body {

                height: 100%;

                overflow: hidden;

            }

            .father{

                position: absolute;

                height: 500px;

                width: 100%;

                background-color:#2AABD2;

            }

            .children

            {

                width: 300px;

                height: 150px;

                background-color: #333333;

                position: relative;

                top: 50%;

                left: 50%;

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

            }

        </style>

    </head>

    <body>

        <div class="father">

            <div class="children">

            </div>

        </div>

    </body>

</html>

效果图如下：
多谢@alexxxcs1提供的另一种方式(不晓得这样能否@到^_^)，嘛其实网上实现居中的方式确实很多，互相探讨加深印象。

css中div垂直居中的方法。的更多相关文章

  1. css 中 div垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  2. css的div垂直居中的方法，百分比div垂直居中

    前言 我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些d ...

  3. css中添加屏幕自适应方法（rem）

    css中添加屏幕自适应方法(rem) 只需要在公共css文件中添加下面代码:设计稿以750px,基础字体为20px为例,兼容性高,使用过程中px转化为rem即可 /*竖屏*/ @media scree ...

  4. CSS教程:div垂直居中的N种方法以及多行文本垂直居中的方法

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  5. CSS教程:div垂直居中的N种方法[转]

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

  6. 纯css使div垂直居中，div垂直，div居中的方法

    首先编写一个简单的html代码,设置一个父div类名为boxFather,再设置一个子div类名为box1.html代码如下: <div class="boxFather"& ...

  7. 使用CSS完美实现垂直居中的方法

    使用XHTML+CSS来实现元素的垂直居中一直是前端开发中的一个比较复杂且棘手的问题,作为网页设计师或前端开发工程师,这个垂直居中问题也是必须掌握的技巧之一,一些互联网公司面试题中也会出现这类题目.今 ...

  8. HTML CSS 中DIV内容居中汇总

    转载博客(http://www.cnblogs.com/dearxinli/p/3865099.html) (备注:DIV居中情况,网上谈到也比较多,但是这篇文字,相对还是挺全面,现转载,如果冒犯,还 ...

  9. div垂直居中的方法（转）

    在说到这个问题的时候,也许有人会问CSS中不是有vertical-align属性来设置垂直居中的吗?即使是某些浏览器不支持我只需做少许的CSS Hack技术就可以啊!所以在这里我还要啰嗦两句,CSS中 ...

随机推荐

  1. spring mvc 接受数组

    @RequestParam(value = "customerIds[]")Integer[] customerIds 加上 requestParam   value设置为 &qu ...

  2. 利用Python进行windows系统上的图像识别与点击(Mac OS系统也可以)

    系统环境: 1.安装了python 2.安装了pyautogui模块 windows系统:无需安装依赖模块,在cmd中直接输入pip install pyautogui即可完成安装 Mac OS系统: ...

  3. 006/搭建fabric(二)

    准备vmware虚拟机,并安装完ubuntu系统后.继续搭建fabric运行环境... 0.打开终端,切换root身份.目的:后续操作即可不用sudo... 右键->open Terminal- ...

  4. [LeetCode]29 两数相除和一个小坑点

    给定两个整数,被除数 dividend 和除数 divisor.将两数相除,要求不使用乘法.除法和 mod 运算符. 返回被除数 dividend 除以除数 divisor 得到的商. 示例 1: 输 ...

  5. python基础-9.2 单例模式

    设计模式 一.单例模式 单例,顾名思义单个实例.创建一个实例 链接池案例 1.单例=>只有一个实例 2.静态方法+静态字段 3.所有的实例中封装的内容相同时用单例模式 class Connect ...

  6. C程序优化

    1 优化内存使用 后期程序优化的时候看内存分配是否浪费:是否留有安全裕量:有些内存是否分配过多,有些内存是否分配了没使用:尤其是创建对象的时候

  7. java_第一年_JDBC（7）

    Commons-dbutils是一个开源的JDBC工具类库,对JDBC进行封装,简化编码的工作量,包含的API: org.apache.commons.dbutils.QueryRunner org. ...

  8. 旧接口注册LED字符驱动设备（动态映射）

    #include <linux/init.h> // __init __exit #include <linux/module.h> // module_init module ...

  9. C++ 函数返回对象时并没有调用拷贝构造函数

    #include <iostream> #include <vector> #include <string.h> using namespace std; cla ...

  10. SQL语句-exec执行

    动态sql语句基本语法1 :普通SQL语句可以用Exec执行 eg:   Select * fromtableName        Exec('select * from tableName')   ...