当子元素大于父元素时，如何将子元素放在父元素的上方/下方居中(加上旋转)？

当子元素的大小超过其父元素时，可以使用CSS来实现子元素在父元素上方或下方居中的效果，并且可以添加旋转效果。以下是一个详细的解决方案：

基础概念

父元素：包含子元素的容器。
子元素：被父元素包含的元素。
居中对齐：使元素在其容器中水平和垂直居中。
旋转：通过CSS的transform属性实现元素的旋转效果。

类型与应用场景

绝对定位：适用于需要精确控制元素位置的场景。
Flexbox：适用于现代布局，特别是需要响应式设计的场景。
Grid布局：适用于二维布局，可以轻松实现复杂的对齐方式。

示例代码

以下是一个使用绝对定位和Flexbox结合旋转效果的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Center and Rotate</title>
    <style>
        .parent {
            position: relative;
            width: 300px;
            height: 200px;
            border: 1px solid #000;
            overflow: hidden; /* 隐藏超出部分 */
        }
        .child {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%) rotate(45deg); /* 居中并旋转45度 */
            width: 400px;
            height: 300px;
            background-color: lightblue;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="child"></div>
    </div>
</body>
</html>

解释

父元素样式：
- position: relative;：设置父元素为相对定位，以便子元素可以相对于它进行绝对定位。
- width 和 height：设置父元素的尺寸。
- border：添加边框以便观察效果。
- overflow: hidden;：隐藏超出父元素的部分。

子元素样式：
- position: absolute;：设置子元素为绝对定位，使其脱离文档流。
- top: 50%; left: 50%;：将子元素的左上角移动到父元素的中心位置。
- transform: translate(-50%, -50%) rotate(45deg);：先将子元素向左和向上移动自身宽高的一半以实现居中，然后旋转45度。