利用绝对定位实现的居中

代码如下：

<!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. Iview 启动报错 TypeError [ERR_INVALID_CALLBACK]: Callback must be a function

    解决 fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {}); 替换为 fs.write(fd, buf, 0, ...

  2. json 格式

    Json格式规则:(Douglas Crockford提出的) 1) 并列的数据之间用逗号(“,”)分隔. 2) 映射用冒号(“:”)表示. 3) 并列数据的集合(数组)用方括号("[]&q ...

  3. 分享：陆行鸟BGM合集

    第39首是原版哦 https://pan.baidu.com/mbox/homepage?short=pMkAqhX

  4. js如何获取到select的option值？？？

    1.获得选项option的值 var obj = document.getElementByIdx_x(”testSelect”); //定位id var index = obj.selectedIn ...

  5. P3188 [HNOI2007]梦幻岛宝珠

    传送门 注意到 $a,b$ 不大 考虑对每一个 $a*2^b$ 的 $b$ 分别背包 设 $f[i][j]$ 表示只考虑 $b=i$ 的物品时,容量为 $j= \sum a$ 的最大价值 这个就是普通 ...

  6. 《Cascaded Pyramid Network for Multi-Person Pose Estimation》论文阅读及复现笔记

    一.PipeLine 要点 TopDown + GlobalNet + RefineNet 二.Motivation 通过提高对难以识别的关键点的识别准确率,来提升总体识别准确率. 方法:1.refi ...

  7. 2018-8-10-sublime-Text-正则替换

    title author date CreateTime categories sublime Text 正则替换 lindexi 2018-08-10 19:16:52 +0800 2018-2-1 ...

  8. VS 2019编辑含有资源文件.resx的项目时提示MSB3086 任务未能使用 SdkToolsPath 或注册表项找到“al.exe”

    环境: Win10 X64, VS2019 错误提示: 错误 MSB3086 任务未能使用 SdkToolsPath“”或注册表项“HKEY_LOCAL_MACHINE\SOFTWARE\Micros ...

  9. Oracle Grid，ASM，Database on Redhat 7.5

    目录 Oracle安装包 Oracle官方文档 Blog Oracle Grid Installation Process 用户.组.目录 Oracleasm 创建 ASM 磁盘 Database S ...

  10. Jupyter Notebook 安装与使用

    Ref: https://jupyter.org/install Installing Jupyter Notebook with pip python -m pip install --upgrad ...