利用绝对定位实现的居中

代码如下：

<!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. 浅谈Java反射机制 之 获取类的 方法 和 属性（包括构造函数）

    上一篇 获取 类 的字节码文件 我们讲到了获取类的字节码文件的三种方法 第三种方法通过getClass("全路径名")获取字节码文件最符合要求 1.获取构造方法 先贴上我们要获取的 ...

  2. yolov--7--解决报错:/bin/sh: 1: nvcc: not found make: *** [obj/convolutional_kernels.o] Error 127

    1.配置darknet配置darknet出现错误: qhy@qhy-desktop:~/darknet$ make cleanqhy@qhy-desktop:~/darknet$ make……gcc ...

  3. 007/Docker（一）

    Docker 属于 Linux 容器的一种封装,提供简单易用的容器使用接口. Docker 将应用程序与该程序的依赖,打包在一个文件里面.运行这个文件,就会生成一个虚拟容器.程序在这个虚拟容器里运行, ...

  4. Java实验报告（一）&&第三周学习总结

    实验报告(一) 1. 打印输出所有的“水仙花数”,所谓“水仙花数”是指一个3位数,其中各位数字立方和等于该数本身.例如,153是一个“水仙花数”. 源代码: public class Main { p ...

  5. JavaSE编码试题强化练习4

    1.编写一个Worker类,为Worker类添加相应的代码,使得Worker对象能正确放入TreeSet中.并编写相应的测试代码. /** * Worker类 */ public class Work ...

  6. NFS实现文件共享

    NFS(Network Files System)即网络文件系统,NFS文件系统协议允许网络中的主机通过TCP/IP协议进行资源共享,NFS客户端可以像使用本地资源一样读写远端NFS服务端的资料,需要 ...

  7. 【SQL Server复制】数据库复制：修改表结构、新增表、新增存储过程 会被复制到订阅服务器？

    转自:https://www.cnblogs.com/happyday56/p/3849018.html 关键字:sql server复制 [SQL Server高可用性]数据库复制:修改表结构.新增 ...

  8. Java中数据类型的分类

    我们知道Java是强类型语言,那么肯定对应的也就有弱类型语言,以下介绍强类型语言与弱类型语言的区别: 强类型语言: 强类型语言也就是强制数据类型定义的语言.也就是说,一旦一个变量被指定了某个数据类型, ...

  9. 汇编移位: SHL、SHR、SAL、SAR、ROL、ROR、RCL、RCR

    SHL.SHR.SAL.SAR: 移位指令 ;SHL(Shift Left):      逻辑左移 ;SHR(Shift Right):      逻辑右移 ;SAL(Shift Arithmetic ...

  10. Dubbo一文入门

    一.简介 系统的架构,已从最早的单体式架构(一个war包完事)逐渐发展到目前的微服务式架构.微服务,将一个大型的复杂的应用系统,拆分成若干独立的松耦合的小的服务工程,每个服务工程可独立部署,每个服务只 ...