方法一： 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. 性能测试必备知识（4）- 使用 stress 和 sysstat

    做性能测试的必备知识系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1806772.html stress 介绍 Linux 系统压力测试 ...

  2. 浅谈服务治理、微服务与Service Mesh（三） Service Mesh与Serverless

    作为本系列文章的第三篇(前两篇<浅谈服务治理.微服务与Service Mesh(一)Dubbo的前世今生>,<浅谈服务治理.微服务与Service Mesh(二) Spring Cl ...

  3. 【JVM之内存与垃圾回收篇】StringTable

    StringTable String的基本特性 String:字符串,使用一对 "" 引起来表示 String s1 = "Nemo"; // 字面量的定义方式 ...

  4. Windows下安装Python 3.X 版本

    一. Python下载 Python官方下载地址 演示下载的版本为Python 3.8.3 ,你可以根据自己的选择安装其他版本的Python 二. Python 安装 下载完安装包双击安装时出错(Wi ...

  5. 使用SQL语句建表，插入数据

    --选中数据库,点击新建查询,然后执行即可--这是SQL中的注释信息,使用两个减号来注释. drop table Book --删除表Book create table Book --创建表Book ...

  6. Go操作腾讯云COS对象存储的简单使用案例

    准备环境 安装Go环境 Golang:用于下载和安装 Go 编译运行环境,请前往 Golang 官网进行下载 安装SDK go get -u github.com/tencentyun/cos-go- ...

  7. Go语言基础语法总结

    1. 认识HelloWorld 在前面的<Go的安装和使用>这篇文章中已经写过HelloWorld.go了,现在就来逐行认识一下它. package main import "f ...

  8. netcore RabbitMQ入门--win10开发环境

    安装 1.进入rabbitMQ官网下载安装包 2.点击安装包安装的时候会提示需要先装erlang 点击是会自动跳转到erlang的下载界面如果没有跳转可以直接点击这里下载,根据系统选择下载包 下载完之 ...

  9. 如何利用tox打造自动自动化测试框架，看完就懂

    什么是toxtox官方文档的第一句话 standardize testing in Python,意思就是说标准化python中的测试,那是不是很适合测试人员来使用呢,我们来看看他究竟是什么? 根据官 ...

  10. java基础(六)--常用转义字符

    1.换行:"\n"