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> ...
随机推荐
- patelinux 安装
参考文档:https://china.xilinx.com/support/documentation/sw_manuals/xilinx2017_2/ug1144-petalinux-tools-r ...
- python 复制以及更改列表操作
题目:设置一个老用户列表和一个新用户列表,检查老用户列表中是否与新注册的用户名字有重复(不区分大小写),老用户列表不能被破坏 usernames = ['admin','Tom','john','ja ...
- sqlserver安装出现找不到数据库引擎错误
sqlserver安装出现找不到数据库引擎错误 问题的解决 第一次安装SQL server,发现它较于Oracle,都有安装卸载十分麻烦的特点.刚开始安装,就让我频繁遇到这个“找不到数据库引擎”的错误 ...
- EOJ Monthly 2019.11 A(进制转换)
"欢迎您乘坐东方航空公司航班 MU5692 由银川前往上海......" "我们的飞机很快就要起飞了,请收起小桌板,摘下耳机......" 收起了小桌板,摘下了 ...
- Centos 7下编译安装Apache
(1)下载apr.apr-util.httpd源码包 百度云下载地址:https://pan.baidu.com/s/1HyW_9XTLhhhf5j_IuNCQsQ 提取码:pg4d (2)安装编译工 ...
- Day17_购物车
学于黑马和传智播客联合做的教学项目 感谢 黑马官网 传智播客官网 微信搜索"艺术行者",关注并回复关键词"乐优商城"获取视频和教程资料! b站在线视频 注:实验 ...
- 安装fiddler 谷歌插件
移动 .crx 插件无法安装问题 解决方案: 修改后缀名为 .zip 文件 进行解压后,使用浏览器扩展程序加载已解压的文件进行扩展 添加插件 2020-06-20
- 线程_使用multiprocessing启动一个子进程及创建Process 的子类
from multiprocessing import Process import os # 子进程执行的函数 def run_proc(name): print("子进程运行中,名称:% ...
- PHP imagecolorclosest - 取得与指定的颜色最接近的颜色的索引值
imagecolorclosest — 取得与指定的颜色最接近的颜色的索引值.高佣联盟 www.cgewang.com 语法 int imagecolorclosest ( resource $ima ...
- JavaScript Object的复制
var obj = { a: 1, b: 2, c: { d: 3, e: 4, f: function () { console.log("对象复制"); } } } 1. fo ...