实现子元素在父元素中水平垂直都居中笔记

实现子元素在父元素中水平垂直都居中

设置子元素绝对定位
设置子元素的left值和top值为50%
设置父元素相对定位
设置子元素margin-left：负自身宽度一半
设置子元素margin-top：负自身高度一半

<style>//消除默认样式*{margin: 0;padding: 0;}.father{width: 500px;height: 500px;background: pink;margin: 100px auto;position: relative;//设置父元素相对定位}.father .son{width: 200px;height: 100px;background: skyblue;position: absolute;//设置子元素绝对定位//设置子元素的left值和top值为50%left: 50%;top:50%;margin-left: -100px;//设置子元素margin-left：负自身宽度一半margin-top: -50px; //设置子元素margin-top：负自身高度一半}
</style>
<div class="father"><div class="son"></div>
</div>

详细版

欢迎访问我的个人博客

实现子元素在父元素中水平垂直都居中笔记相关推荐

子盒子在父盒子中水平垂直居中
子盒子在父盒子中水平垂直居中的几种实现方式. 方式一:margin; HTML:  <div class="father"&g ...
小div在大div里面水平垂直都居中的实现方法
关于如何设置小盒子在大盒子里面水平垂直方向同时居中的实现方法有很多种,下面仅列举了常用的几种. 首先看一下要实现的效果图及对应的html代码: <div class="parent&q ...
jQuery中兄弟元素、子元素和父元素的获取
我们这里主要总结jQuery中对某元素的兄弟元素.子元素和父元素的获取,原声的Javascript代码对这些元素的获取比较麻烦一些,而jQuery正好对这些方法进行封装,让我们更加方便的对这些元素进行 ...
伪元素在父元素中居中_web前端Html5开发CSS之元素五大居中方式，实用又简单！...
大家是不是对元素居中的知识点很是模糊?是不是苦于找不到一个总结的通俗易懂的说明?是不是自己懒得去总结?今天小编在前端的学习与实践中总结出的元素的五大居中方式,黏贴了代码并对代码做了解释,希望对迷茫的有 ...
怎么判断子元素距离父元素顶部位置_css子元素如何相对父元素定位？
在css中,可以使用position属性,通过给父元素设置相对定位"position:relative;"样式,给子元素设置绝对定位"position:absolute; ...
子元素scroll父元素容器不跟随滚动JS实现
小tip: 子元素scroll父元素容器不跟随滚动JS实现这篇文章发布于 2015年12月18日,星期五,00:07,归类于 js实例. 阅读 44546 次, 今日 41 次 by zhangxi ...
子元素超出父元素宽高是否会报错？
目前来看,如果父元素是Container,那么子元素超出父元素就不会报错: 如果子元素被Column或Row包裹,那么子元素超出父元素就会报错: RenderFlex overflowed by 22 ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
html让空间高度跟随父级,CSS子元素跟父元素的高度一致的实现方法
绝对定位方法: (1)将父元素设置为相对定位,不写父元素的高度时,会随着左边的子元素高度变化而变化 .parent { /*关键代码*/ position: relative; /*其他样式*/ wi ...
CSS子元素选择父元素
通常一个CSS选择器都是从上往下选择的,通过父元素选择子元素,那么能不能通过子元素选择父元素呢? <ul><li><a href="#" class= ...

实现子元素在父元素中水平垂直都居中笔记

实现子元素在父元素中水平垂直都居中

实现子元素在父元素中水平垂直都居中笔记相关推荐

最新文章

热门文章