css如何让子元素在父元素中水平垂直居中
方法一： 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如何让子元素在父元素中水平垂直居中的更多相关文章
- CSS实现图片在div a标签中水平垂直居中
CSS实现图片在div a标签中水平垂直居中 <div class="demo"> <a href="#"> <img src=& ...
- css实现高度不固定的div元素模块在页面中水平垂直居中
<!DOCTYPE html><html> <head> <title>Laravel</title> <link ...
- 让子元素在父元素中水平居中align-items
做案例中,我们会发现让子元素在父元素中垂直居中,要设置margin和padding等,各种设置才能垂直居中 现在可以使用CSS3中的align-items实现 align-items 定义子元素在父元 ...
- ie10中元素超出父元素的宽度时不能自动隐藏
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期2014-02-21) 今天遇到一个问题,ie10中元素超出父元素的宽度时不能自动隐藏,而其余浏览器却正常显示. 解决方法是,手动给其设 ...
- jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- css使子元素在父元素居中的各种方法
html结构: <div class="parent"> <div class="child"></div> </di ...
- CSS子元素居中(父元素宽高已知，子元素未知)
<style> .container{width:400px; height:400px; position:relative;} .center{position:absolute; l ...
- jQuery学习笔记---兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
- 一个 VUE 组件：实现子元素 scroll 父元素容器不跟随滚动（兼容PC、移动端）
介绍 我们经常遇到一种情况.当滑动滚动条区域时,子元素滚动条到底部或顶部时就会触发父级滚动条,父级滚动条同理会继续向上触发,直至body容器.这是浏览器默认的滚动行为. 但是很多情况,我们想要子元素滚 ...
- WPF XMAL获取元素的父元素，子元素
/// 获得指定元素的父元素 /// </summary> /// <typeparam name="T">指定页面元素</typeparam> ...
随机推荐
- Python Ethical Hacking - Persistence(2)
Polish the Python code by adding the become_persistent function. #!/usr/bin/env python import json i ...
- JVM系列之:详解java object对象在heap中的结构
目录 简介 对象和其隐藏的秘密 Object对象头 数组对象头 整个对象的结构 简介 在之前的文章中,我们介绍了使用JOL这一神器来解析java类或者java实例在内存中占用的空间地址. 今天,我们会 ...
- 高效C++：设计与声明
C++软件开发可以理解为设计一系列的类,让这些类相互使用,最终实现我们所需要的功能.类与类之间的相互关系可以很复杂,也可以很简单,如何简单高效的描述类与类之间的关系是设计的难点之一.遵循本文所提供的方 ...
- 题解 洛谷 P4602 【[CTSC2018]混合果汁】
注意到问题具有单调性,所以一个询问可以通过二分答案来解决. 对于多组询问,就采用整体二分来处理. 将果汁按\(d\)从大到小排序,二分出一个位置\(mid\),只考虑在位置\(mid\)之前的果汁,其 ...
- 数字货币交易所（火币为例）如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器？
一般点账户名——设置——安全设置中开通虚拟MFA两步验证 具体步骤见链接 数字货币交易所(火币为例)如何使用二次验证码/虚拟MFA/两步验证/谷歌验证器? 二次验证码小程序于谷歌身份验证器APP的优 ...
- springboot（12）Redis作为SpringBoot项目数据缓存
简介: 在项目中设计数据访问的时候往往都是采用直接访问数据库,采用数据库连接池来实现,但是如果我们的项目访问量过大或者访问过于频繁,将会对我们的数据库带来很大的压力.为了解决这个问题从而redis数据 ...
- Azure Load Balancer（一） 为我们的Web项目提供负载均衡
一,引言 上节,我们讲到使用 Azure Traffic Manager 为我们的 Demo 项目提供负载均衡,以及流量转发的功能.但是Azure 提供类似的功能的服务远远不止这一个,今天我们就来讲一 ...
- hostapd阅读（openwrt）-3
从官网下载相对而言比较干净的源码版本http://w1.fi/hostapd/,然后将其移植到openwrt下,方便在源码阅读时候进行调试编译,移植的过程总结如下心得. 1. openwrt编译与cl ...
- python（xlsxwriter模块使用）
XlsxWriter简介XlsxWriter是一个Python模块,可用于在Excel 2007+ XLSX文件中写入多个工作表的文本,数字,公式和超链接.它支持格式化等功能.可到官网了解更多详情,官 ...
- python线程,进程,队列和缓存
一.线程 threading用于提供线程相关的操作,线程是应用程序中工作的最小单元. 创建线程的两种方式1.threading.Thread import threading def f1(arg): ...