方法一： 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. T133305 57级返校测试重测-T1-数字配对

    大致题意: 给定偶数个的数字,操作使得两两配对后的最大值最小. 基本思路: 先排序,然后设i=1,j=n(序列以下标1开始), 每次配对为a[i]+a[j],然后++i,--j. 最后找到最大的配对结 ...

  2. Logging with ElasticSearch, Kibana, ASP.NET Core and Docker

    好久不见,前两周经历了人生第一次"伪牛市",基金和股市大起大落,更加坚信"你永远赚不到超出你认知范围之外的钱,除非靠着运气",老韭菜诚不欺我也. 当能力与野心不 ...

  3. 自学 Python 到什么程度能找到工作，1300+ 条招聘信息告诉你答案

    随着移动互联网的发展以及机器学习等热门领域带给人们的冲击,让越来越多的人接触并开始学习 Python.无论你是是科班出身还是非科班转行,Python 无疑都是非常适合你入门计算机世界的第一门语言,其语 ...

  4. mybatis sqlsession与sqlsquery、transaction、connection

    sqlsession和connection 一个sqlsession一般对应一个connection,并且mybatis默认每次获取session都会开启一个事务,且不自动提交事务.如果更新操作完成后 ...

  5. 第四课 OOP封装继承多态解析，接口抽象类选择 2019-04-21

    父类 xx = new 子类(); xx.method(); 1 普通方法由编译时决定(左边) --- 提高效率 2 虚方法(virtual)  由运行时决定-- -多态,灵活 3 抽象方法由运行时决 ...

  6. 项目总结，彻底掌握NodeJS中如何使用Sequelize

    前言 sequelize是什么? sequelize是基于NodeJs的ORM框架,它适用于不同的数据库,如:Postgres.MySQL.SQLite.MariaDB,我们可以通过sequelize ...

  7. Java数据结构和算法（1）之队列

    1.队列的基本概念 队列(queue)是一种特殊的线性表,特殊之处在于它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作,和栈一样,队列是一种操作受限制的线性表.进行插 ...

  8. Django学习路7_注册app到能够在页面上显示app网页内容

    在根目录下创建一个 app3 app3 是新 app 的名字 创建一个 urls.py 在 urls.py 中添加 urlpatterns 列表 容纳需要显示在页面上的函数 from django.c ...

  9. 小甲鱼零基础汇编语言学习笔记第二章之寄存器（CPU工作原理，CPU内部通讯）

    这一章主要介绍了CPU中的重要器件——寄存器,整个系列通篇是以8086CPU作为探讨对象,其它更高级的CPU都是在此基础之上进行的升级.   1.一个典型的CPU是由运算器.控制器.寄存器等器件组成, ...

  10. luogu 4331 [BalticOI 2004]Sequence 数字序列

    LINK:数字序列 这是一道论文题 我去看了一眼论文鸽的论文. 发现讲的还算能懂.可并堆的操作也讲的比较清晰. 对于这道题首先有一个小trick 我们给a数组全部减去其对应的下标这样我们求出来的b数组 ...