方法一： display:flex

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../css_com/reset.css">

    <style>

        .parents{

            /*添加部分*/

            display: flex;

            align-items: center;

            justify-content: center;

            margin:0 auto;

            width: 600px;

            height: 600px;

            background-color: #4eff5e;

        }

        .son{

            width: 300px;

            height: 300px;

            background-color: #ff4236;

        }

    </style>

</head>

<body>

    <div class="parents">

        <div class="son"></div>

    </div>

</body>

</html>

方法二：display:table-cel

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../css_com/reset.css">

    <style>

        .parents{

            /*添加部分*/

            display: table-cell;

            vertical-align: middle;

            margin:0 auto;

            width: 600px;

            height: 600px;

            background-color: #4eff5e;

        }

        .son{

            /*添加部分*/

            margin: auto;

            width: 300px;

            height: 300px;

            background-color: #ff4236;

        }

    </style>

</head>

<body>

    <div class="parents">

        <div class="son"></div>

    </div>

</body>

</html>

方法三：绝对定位和0

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../css_com/reset.css">

    <style>

        .parents{

            /*添加部分*/

            position: relative;

            margin:0 auto;

            width: 600px;

            height: 600px;

            background-color: #4eff5e;

        }

        .son{

            /*添加部分*/

            margin: auto;

            position: absolute;

            top: 0;

            left: 0;

            bottom: 0;

            right: 0;

            width: 300px;

            height: 300px;

            background-color: #ff4236;

        }

    </style>

</head>

<body>

    <div class="parents">

        <div class="son"></div>

    </div>

</body>

</html>

方法四：负边距

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../css_com/reset.css">

    <style>

        .parents{

            /*添加部分*/

            position: relative;

            margin:0 auto;

            width: 600px;

            height: 600px;

            background-color: #4eff5e;

        }

        .son{

            /*添加部分*/

            position: absolute;

            top: 50%;

            left: 50%;

            margin-left: -150px;

            margin-top: -150px;

            width: 300px;

            height: 300px;

            background-color: #ff4236;

        }

    </style>

</head>

<body>

    <div class="parents">

        <div class="son"></div>

    </div>

</body>

</html>

方法四：css3属性中的平移

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="../css_com/reset.css">

    <style>

        .parents{

            /*添加部分*/

            position: relative;

            margin:0 auto;

            width: 600px;

            height: 600px;

            background-color: #4eff5e;

        }

        .son{

            /*添加部分*/

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

            width: 300px;

            height: 300px;

            background-color: #ff4236;

        }

    </style>

</head>

<body>

    <div class="parents">

        <div class="son"></div>

    </div>

</body>

</html>

目前总结这四种方法，实际使用的时候根据实际情况选取不同的方法

　

css如何让子元素在父元素中水平垂直居中的更多相关文章

  1. CSS实现图片在div a标签中水平垂直居中

    CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...

  2. css实现高度不固定的div元素模块在页面中水平垂直居中

    <!DOCTYPE html><html>    <head>        <title>Laravel</title> <link ...

  3. 让子元素在父元素中水平居中align-items

    做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元 ...

  4. ie10中元素超出父元素的宽度时不能自动隐藏

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...

  5. jQuery中兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  6. css使子元素在父元素居中的各种方法

    html结构: <div class="parent"> <div class="child"></div> </di ...

  7. CSS子元素居中(父元素宽高已知，子元素未知)

    <style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...

  8. jQuery学习笔记---兄弟元素、子元素和父元素的获取

    我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...

  9. 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）

    介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...

  10. WPF XMAL获取元素的父元素，子元素

    /// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...

随机推荐

  1. 学会Markdown不仅可以用来编写文档，还可以制作自己的简历，真香！

    程序员的简历要简洁明了,不要太多花哨的修饰,突出重点即可,使用markdown就可以很好的满足写一份简历的需求 Markdown 简历模板 这里我贡献一下我自己的markdown简历模板,简历效果如下 ...

  2. 重磅分享：美团点评架构师私藏的内部Linux运维笔记

    最近不少小伙伴后台联系,希望能弄一些大厂的学习资料,我这边费了很大劲,联系到老朋友,原美团点评架构师张sir,问他要了些美团点评架构的内部资料. 这份资料含金量非常高,包含整个美团点评架构架构图,Li ...

  3. 如何使用ABP进行软件开发（2） 领域驱动设计和三层架构的对比

    简述 上一篇简述了ABP框架中的一些基础理论,包括ABP前后端项目的分层结构,以及后端项目中涉及到的知识点,例如DTO,应用服务层,整洁架构,领域对象(如实体,聚合,值对象)等. 笔者也曾经提到,AB ...

  4. vscode用MinGW和Clang配置C++环境

    vscode是个不错的编辑器,简洁轻量,就是一开始的时候需要对环境进行配置,开个贴记录一下怎么用MingGW64+clang来配置. 下载地址 LLVM Download Page Pre-Built ...

  5. idea中maven导入依赖报红的解决办法

    使用idea创建maven项目,maven导入依赖报红,从以下几个步骤排查解决问题: 1.首先查看maven的安装和配置有没有问题.那么,要看那些内容呢.maven的安装位置.maven的settin ...

  6. 原来python还可以这样处理文件

    首先我为大家介绍一下python语言吧! Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言 ...

  7. 推荐IT经理/产品经理，常用工具和网站

    一.  常用必备工具 1)文档工具 石墨文档,在线协作文档工具 https://shimo.im/ 2) 表格工具 麦客,在线问卷调查工具 http://www.mikecrm.com/ 3)脑图工具 ...

  8. Python编程初学者指南|百度网盘免费下载|Python新手入门资料

    Python编程初学者指南|百度网盘免费下载 提取码:9ozx 目录  · · · · · · 第1章 启程:Game Over程序1.1 剖析Game Over程序1.2 Python简介1.2.1 ...

  9. 今天上午完成了devicescan，发送了rar包到yzx3233@sina.com

    今天上午完成了devicescan,发送了rar包到yzx3233@sina.com 可以正常扫描和输入了. 还有一个最后的问题,就是选择退出后,程序还在后台

  10. java基础(五)--基本数据类型、占用字节、数值范围

    一.Java基本数据类型 基本数据类型有8种:byte.short.int.long.float.double.boolean.char 分为4类:整数型.浮点型.布尔型.字符型. 整数型:byte. ...