子元素相对于父元素垂直居中对齐

记个笔记

1. 元素相对于浏览器居中

<style>.window-center {/* 将position设置为fixed，使元素相对于浏览器窗口定位 */position: fixed;/* 将margin设置为auto，使浏览器自动推算元素外边距 */margin: auto;/* 将上下左右边距（相对于浏览器窗口边缘）全设为0，使浏览器推算出的外边距上下、左右对应相等可以设置任何其他相等的值，但如果窗口小到不能容下任意一个方向的两侧边距，元素也将不居中，所以推荐设为0 */left: 0;right: 0;top: 0;bottom: 0;}div {/* 使用这种方法的元素必须有绝对或相对大小，否则浏览器推算出的margin将为0，元素将被拉伸，以适应窗口大小和四个边距值 */width: 30%;height: 100px;background-color: antiquewhite;}
</style><body>
<div class="window-center"></div>
</body>

2. 子元素相对于父元素居中：

首先，要把元素的position属性值改为absolute，使其有可能相对于父元素定位，而不是相对于浏览器窗口定位。absolute指定元素相对于position值不为static的第一个祖先元素定位（如果找不到这样的祖先元素，就相对于body），而static是元素position属性的默认值

如果将父元素的position属性设为relative，但不改变定位属性（left、top等），那么就达到了既让子元素相对于其定位，又不改变其默认布局方式的效果。

<style>
div.parent {position: relative;/* 父元素可以有绝对或相对大小，也可以仅由其内容决定其大小 */width: 40%;height: 200px;background-color: aquamarine;}div.child {/* 使用这种方法的元素必须有绝对或相对大小，否则浏览器推算出的margin将为0，元素将被拉伸，以适应父元素大小和四个边距值 */width: 30%;height: 100px;background-color: antiquewhite;}/* 这是一个用于演示父元素的默认定位未被影响，并且子元素确实是相对于父元素居中的干扰元素 */#commonDiv {width: 100px;height: 100px;background-color: cadetblue;}
</style><body>
<!-- 2. 子元素居于父元素垂直水平中 <div id="commonDiv"></div><div class="parent"><div class="parent-center child"></div></div>-->
</body>

3，弹性盒子flex感觉不太行，不知道为什么，知道的朋友欢迎随时留言

来源：https://www.cnblogs.com/zhuxinghan/p/6031678.html

转载于:https://www.cnblogs.com/jliu520222/p/9799426.html

子元素相对于父元素垂直居中对齐相关推荐

php 元素添加子元素,css,html_怎么在添加的子元素上继承父元素上已存在的子元素的属性？，css,html,javascript - phpStudy...
怎么在添加的子元素上继承父元素上已存在的子元素的属性? 请问如何使添加后的子元素(tr)也能在鼠标经过前后继续保留其存在的子元素上的属性? dom的基础应用 window.οnlοad=functio ...
JS子元素oumouseover触发父元素onmouseout
原文:JS子元素oumouseover触发父元素onmouseout JavaScript中,父元素包含子元素: 当父级设置onmouseover及onmouseout时,鼠标从父级移入子级,则触发父 ...
父元素设置overflow: overlay；或 overflow: scroll；或 overflow: auto；如果子元素超出父元素内容，父元素会被子元素超出部分撑大至子元素同样大小
发现父元素设置overflow: overlay; 或 overflow: scroll; 或 overflow: auto; 如果子元素超出父元素内容,父元素会被子元素超出部分撑大至子元素同样大小 ...
子div用了float浮动之后，如何撑开父元素，让父元素div自动适应高度的问题
方法一: html: <div id="all1"><div id="left1">1</div><div id=&q ...
解决子元素浮动，父元素没有撑开的问题
/*子元素浮动,父元素撑开*/ .父元素{} .父元素:before{content:"";display:table; } .父元素:after{content:"&q ...
解决CSS子元素绝对定位致使父元素高度为0
方法: 使用JS 代码: // 解决子元素决定定位父元素高度塌陷 var father = document.querySelector('.father '); var son = document ...
解决子元素浮动造成父元素高度塌陷的问题学习总结
解决子元素浮动造成父元素高度塌陷的问题的几种方法与BFC原理简释一.解决子元素浮动造成父元素高度塌陷的问题的4种方法 1.直接给父元素设置高度,在子元素改变的情况下,此方法使用起来比较繁杂. 2.给 ...
css笔记（选择器+清除浮动+定位+margin叠加以及子元素margin对父元素拖拽+羽化阴影）
##css(Cascading Style Sheet) 1.样式引入行内样式:优点--效率高: 缺点--html与css代码耦合,复用性低内部样式表:优点--解决css和html代码耦合: 缺点- ...
关于元素绝对定位的父元素问题
在一个技术群里看到别人争论关于子元素绝对定位,父元素要是也是绝对定位了,子元素应该选择以谁为参照物的问题,我刚开始想都没想就觉得它应该选择父元素的父元素为参照物,但是自己写个例子测试了一下,发现自己被 ...

子元素相对于父元素垂直居中对齐

子元素相对于父元素垂直居中对齐相关推荐

最新文章

热门文章