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> ...
随机推荐
- Ubuntu18.04安装Docker并部署(编译、发布、构建镜像)Asp.NetCore项目全过程笔记
环境准备:阿里云Ubuntu18.04 全新安装 一.安装Docker 1.删除旧版本并更新包索引: sudo apt-get remove docker docker-engine dock ...
- DEBUG ArrayList
1,ArrayList面试必问 说说ArrayList和LinkedList的区别? ArrayList基于数组实现,LinkedList基于链表实现,不同的数据结构决定了ArrayList查询效率比 ...
- C++语法小记---重载逻辑操作符
重载逻辑操作符 不建议重载逻辑操作符 原因:无法实现逻辑操作符的短路功能(即:不需要计算完全部表达式就可以得出结果) 逻辑操作符:|| && 操作符重载本质上是函数调用,而进行函数调用 ...
- 【bfs+链式向前星】防御僵尸(defend)计蒜客 - 45288
题目: A 国有 n 座城市,n−1 条双向道路将这些城市连接了起来,任何两个城市都可以通过道路互通. 某日,A 国爆发了丧尸危机,所有的幸存者现在都聚集到了 A 国的首都(首都是编号为 1 的城市) ...
- 【Kafka】Kafka测试时控制台日志级别修改
在学习Kafka客户端时日志打的飞起,根本看不到自己发的消息,找了半天网上竟然没有这方面的资料.想了下依赖关系,这里应该只要把slf4j的日志级别调整应该就ok了. static { LoggerCo ...
- ajax工作原理/实例
ajax是什么? 是一种创建交互式网页应用的一种网页技术.简单来说,就是向服务器发起请求,获得数据使交互性和用户体验更好. ajax不是一种新的技术,是一些技术的集合体.有 1.XHTML和CSS 2 ...
- windows下nginx问题：[crit] 796#7096: *1 GetFileAttributesEx() "F: ginx-1.12.2\html\dist" failed (123: The filename, directory name, or volume label syntax is incorrect), client: 127.0.0.1, server: localho
错误信息: 2019/09/09 13:54:37 [crit] 796#7096: *1 GetFileAttributesEx() "F: ginx-1.12.2\html\dist&q ...
- Python 简明教程 --- 26，Python 多进程编程
微信公众号:码农充电站pro 个人主页:https://codeshellme.github.io 学编程最有效的方法是动手敲代码. 目录 1,什么是多进程 我们所写的Python 代码就是一个程序, ...
- 面试官：如何在Integer类型的ArrayList中同时添加String、Character、Boolean等类型的数据？ | Java反射高级应用
原文链接:原文来自公众号:C you again,欢迎关注! 1.问题描述 "如何在Integer类型的ArrayList中同时添加String.Character.Boolean等 ...
- 虚拟机 NAT 网络静态ip配置记录
环境 VMware 15.5.5 build-16285975 centos7 虚拟网络编辑器配置 位置 编辑 --> 虚拟网络编辑器 示例 以下以 192.168.18.0 网段ip为例,实际 ...