css元素垂直居中的四个方法（包括未知元素的高度的解决方法）_css 定位垂直居中

height: 200px;

background-color: #6699ff;

position: absolute;

/父元素需要相对定位/

top: 50%;

left: 50%;

margin-top: -100px;

/设为高度的1/2/

margin-left: -100px;

/设为宽度的1/2/

}

方法二：绝对定位居中（改进版之一未知元素的高宽）

---

.content {

width: 200px;

height: 200px;

background-color: #6699ff;

position: absolute;

/父元素需要相对定位/

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

/在水平和垂直方向上各偏移-50%/

}

方法三：绝对定位居中（改进版之二未知元素的高宽）

---

.content {

width: 200px;

height: 200px;

background-color: #6699ff;

margin: auto;

/很关键的一步/

position: absolute;

/父元素需要相对定位/

left: 0;

top: 0;

最后

javascript是前端必要掌握的真正算得上是编程语言的语言，学会灵活运用javascript，将对以后学习工作有非常大的帮助。掌握它最重要的首先是学习好基础知识，而后通过不断的实战来提升我们的编程技巧和逻辑思维。这一块学习是持续的，直到我们真正掌握它并且能够灵活运用它。如果最开始学习一两遍之后，发现暂时没有提升的空间，我们可以暂时放一放。继续下面的学习，javascript贯穿我们前端工作中，在之后的学习实现里也会遇到和锻炼到。真正学习起来并不难理解，关键是灵活运用。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

/618166371)**

[外链图片转存中…(img-SBRah5Sb-1714259230459)]

[外链图片转存中…(img-eB0KgJ64-1714259230461)]