方法一： 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. echarts 实战 : 图表竖着或横着是怎样判定的？

    这个问题比较简单. echarts 的图表默认是竖着的. 只要 xAxis 和 yAxis 互换,竖着的图就变成了横着的图了. 所以我们可以可以写一个xy轴互换的方法. reverseXYAxis = ...

  2. K8s-Pod健康检查原理与实践

    Pod健康检查介绍 默认情况下,kubelet根据容器运行状态作为健康依据,不能监视容器中应用程序状态,例如程序假死.这将会导致无法提供服务,丢失流量.因此重新健康检查机制确保容器健康幸存.Pod通过 ...

  3. javascrip jason

    JavaScript JSONJSON 是用于存储和传输数据的格式. JSON 通常用于服务端向网页传递数据 . <html><head><meta http-equiv ...

  4. Salt组件(一)

    一.管理对象属性(Grains) Grains里面记录着每台Minion的一些常用属性,比如CPU.内存.磁盘.网信息等,我们可以通过grains.items查看某台Minion的所有Grains信息 ...

  5. 关于RecyclerView（二）设置EmptyView

    首先重写一个RecyclerView类 package com.onepilltest.others; import android.content.Context; import android.s ...

  6. sublime text 配置文件

    不慌． 上网上下的clang全是报错,所以就想先配置一下文件． 其实它本来的配置我觉得挺好的． 可能因人而异有些地方还是改了改． 原版有英语注释的,就当是学英语了 // While you can e ...

  7. maven install报The forked VM terminated without saying properly goodbye. VM crash or System.exit called

    idea新导入的工程maven install打包报错误:The forked VM terminated without saying properly goodbye. VM crash or S ...

  8. Python os.unlink() 方法

    概述 os.unlink() 方法用于删除文件,如果文件是一个目录则返回一个错误.高佣联盟 www.cgewang.com 语法 unlink()方法语法格式如下: os.unlink(path) 参 ...

  9. Python List sort()方法

    描述 sort() 函数用于对原列表进行排序,如果指定参数,则使用比较函数指定的比较函数.高佣联盟 www.cgewang.com 语法 sort()方法语法: list.sort(cmp=None, ...

  10. PHP stripos() 函数

    实例 查找 "php" 在字符串中第一次出现的位置: <?php高佣联盟 www.cgewang.comecho stripos("I love php, I lo ...