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> ...
随机推荐
- 「从零单排canal 05」 server模块源码解析
基于1.1.5-alpha版本,具体源码笔记可以参考我的github:https://github.com/saigu/JavaKnowledgeGraph/tree/master/code_read ...
- HDU - 1520 Anniversary party （树的最大独立集）
Time limit :1000 ms :Memory limit :32768 kB: OS :Windows There is going to be a party to celebrate t ...
- Android 性能优化---布局优化
Android 性能优化---布局优化 Android 布局绘制原理 布局加载过程 setContentView() --> inflate() -- > getLayout()(I/O操 ...
- [并发编程] -- ThreadPoolExecutor篇
Executor框架 Executor框架的两级调度模型(基于HotSpot) 在上层,Java多线程程序通常把应用分解为若干个任务,然后使用用户级的调度器(Executor框架)将这些任务映射为固定 ...
- java 心跳机制
心跳机制:就是每隔几分钟发送一个固定信息给服务端,服务端收到后回复一个固定信息如果服务端几分钟内没有收到客户端信息则视客户端断开. 心跳包 心跳包就是在客户端和服务器间定时通知对方自己状态的一个自己定 ...
- Python的条件判断与循环
1.if语句 Python中条件选择语句的关键字为:if .elif .else这三个.其基本形式如下 if condition: blockelif condition: block...else: ...
- org.apache.catalina.LifecycleException: Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/book]] Tomcat ServletXml 异常
此异常是因为xml配置serlvet-url-pattern缺少’/’ 应该改为 /regist 背景: 写了base标签 form表单的action属性的值 个人分析: ️表单提交时 ...
- Python os.openpty() 方法
概述 os.openpty() 方法用于打开一个新的伪终端对.返回 pty 和 tty的文件描述符.高佣联盟 www.cgewang.com 语法 openpty()方法语法格式如下: os.open ...
- PHP popen() 函数
定义和用法 popen() 函数使用 command 参数打开进程文件指针. 如果出错,该函数返回 FALSE. 语法 popen(command,mode) 参数 描述 command 必需.规定要 ...
- 牛客练习赛64 如果我让你查回文你还爱我吗 线段树 树状数组 manacher 计数 区间本质不同回文串个数
LINK:如果我让你查回文你还爱我吗 了解到了这个模板题. 果然我不会写2333... 考试的时候想到了一个非常辣鸡的 线段树合并+莫队的做法 过不了不再赘述. 当然也想到了manacher不过不太会 ...