Html 旋转div内的中心文本

我试图在旋转45度的div中垂直和水平居中放置标题（

transform:rotate（45度）；

）。 因为div是旋转的-我将航向旋转到相反的方向（

变换：旋转（-45度）；

），然后应用常规的定心技术，这是行不通的。解决这个问题的办法是什么

#换行{
位置：相对位置；
变换：旋转（45度）；
顶部：150px；
背景颜色：蓝色；
高度：300px；
宽度：300px；
保证金：0自动；
}
h1{
位置：绝对位置；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
变换：旋转（-45度）；
}

一些居中的文本

您应该一个接一个地编写一个

变换
函数

我对你的css做了一个小改动，还添加了
text-align:center

transform: rotate(-45deg) translate(0, -100%);


#换行{
位置：相对位置；
变换：旋转（45度）；
顶部：150px；
背景颜色：蓝色；
高度：300px；
宽度：300px；
保证金：0自动；
}
h1{
位置：绝对位置；
最高：50%；
左：50%；
变换：旋转（-45度）平移（0，-100%）；
文本对齐：居中；
}

一些居中的文本
在您的
h1
元素中，您定义了此样式

h1 {
    ...
    transform: translate(-50%, -50%);
    transform: rotate(-45deg);
}

您正在使用
rotate（）
覆盖第一个
transform
属性，这样做会丢失由负数
translate（）
获得的居中效果：您应该像这样链接两个变换

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    transform: translate(-50%, -50%) rotate(-45deg);
}

您还应该删除应用于
h1
元素的默认
margin
（编辑演示，看看没有
margin:0；
时会发生什么）

示例：
使用此
变换：平移（-50%，-50%）旋转（-45度）


#换行{
位置：相对位置；
变换：旋转（45度）；
顶部：150px；
背景颜色：蓝色；
高度：300px；
宽度：300px；
保证金：0自动；
}
h1{
位置：绝对位置；
最高：50%；
左：50%；
变换：平移（-50%，-50%）旋转（-45度）；
}

一些居中的文本
如果您愿意固定h1元素的高度/宽度，可以使用以下方法：

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg);
    height: 120px;
    line-height: 40px;
    width: 150px;
    margin-top: -60px;
    text-align: center;
    margin-left: -75px;
}

您可以通过将
h1
封装到另一个
div


#换行{
位置：相对位置；
变换：旋转（45度）；
顶部：150px；
背景颜色：蓝色；
高度：300px；
宽度：300px；
保证金：0自动；
}
#正文{
位置：绝对位置；
高度：300px；
宽度：300px；
转换：翻译（-50%，-50%）；
变换：旋转（-45度）；
背景色：红色；
}
h1{
文本对齐：居中；
线高：300px；
边距：0；/*H1具有默认边距，请阅读更多：https://www.w3.org/TR/html-markup/h1.html *
}

一些居中的文本
评论我的人是否愿意至少说出原因？