方法一： 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. ant design pro/前端/JS：实现本地运行https

    工具:github---mkcert 用于生成本地证书 ant p版本:1.0.0 这里我只说如何给antp部署https,以及会遇到的问题解决,其他请看原文参考 1.用mkcert生成证书,去git ...

  2. [spring cloud] -- 核心篇

    核心功能: 分布式/版本化配置 服务注册合发现 服务路由 服务和服务之间的调用 负载均衡 断路器 分布式消息传递 ...... 技术体系 组件 服务注册与发现组件:Eureka.Zookeeper和C ...

  3. spring读取jdbc(file方式)

    使用PropertyPlaceholderConfigurer类载入外部配置 在Spring项目中,你可能需要从properties文件中读入配置注入到bean中,例如数据库连接信息,memcache ...

  4. SpringSecurity+Oauth2+Jwt实现toekn认证和刷新token

    简单描述:最近在处理鉴权这一块的东西,需求就是用户登录需要获取token,然后携带token访问接口,token认证成功接口才能返回正确的数据,如果访问接口时候token过期,就采用刷新token刷新 ...

  5. 疯狂Python讲义PDF高清完整版免费下载|百度网盘

    百度网盘:疯狂Python讲义PDF高清完整版免费下载 提取码:uzba 内容简介 <疯狂Python讲义>既是一本适合初学者入门Python的图书(一个8岁的小朋友在未出版前已学习了本书 ...

  6. python 连接 mysql 的三种驱动

    连接 mysql 驱动 mysq1-client python2,3都能直接使用 对myaq1安装有要求,必须指定位置存在 配置文件 python-mysql python3 不支持 pymysql ...

  7. PHP mt_getrandmax() 函数

    实例 返回通过调用 mt_rand() 函数显示的随机数的最大可能值: <?phpecho(mt_getrandmax()); ?>高佣联盟 www.cgewang.com 定义和用法 m ...

  8. CF724C Ray Tracing 扩展欧几里得 平面展开

    LINK:Ray Tracing 虚这道题很久了 模拟赛考了一个加强版的 瞬间就想到了这道简化版的. 考虑做法 暴力模拟可能可以 官方正解好像就是这个. 不过遇到这种平面问题可以考虑把平面给无限的展开 ...

  9. Springboot中的CommandLineRunner

    CommandLineRunner接口的作用 在平常开发中可能需要实现在启动后执行的功能,Springboot提供了一种简单的实现方案,即实现CommandLineRunner接口,实现功能的代码在接 ...

  10. Docker之Ubuntu上使用Docker的简易教程

    Ubuntu上使用Docker的简易教程 原始文档:https://www.yuque.com/lart/linux/fp6cla 说在开头 在天池的比赛中涉及到了docker的使用.经过多番探究,大 ...