Question

我尝试在旋转45度（transform:rotate(45deg);）的div内垂直和水平居中标题。因为div是旋转的 - 我将标题旋转到相反的方向（transform:rotate(-45deg);），然后应用常规的定心技术，这些技术并不起作用。解决方案是什么？

＆＃13;

#wrap {
	position: relative;
	transform: rotate(45deg);
	top: 150px;
	background-color: blue; 
	height: 300px;
	width: 300px;
	margin:0 auto;
}

h1 {
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	transform: rotate(-45deg);
}

＆＃13;

<html>
  <body>
    <div id="wrap"><h1>some centered text</h1></div>
  </body>
</html>

＆＃13;

Answer 1

你应该一个接一个地写一个transform函数我在你的CSS中做了一些小改动，还添加了text-align: center;

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

＆＃13;

#wrap {
	position: relative;
	transform: rotate(45deg);
	top: 150px;
	background-color: blue; 
	height: 300px;
	width: 300px;
	margin:0 auto;
}

h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg) translate(0, -100%);
    text-align: center;
}

＆＃13;

<html>
  <body>
    <div id="wrap"><h1>some centered text</h1></div>
  </body>
</html>

＆＃13;

Answer 2

在h1元素中，您定义了此样式

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

您使用transform覆盖了第一个rotate()属性并且这样做会导致您失去由否定translate()获得的居中效果：您应该链接而不是像这样的两个转变

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

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

示例：http://codepen.io/anon/pen/jWjxeW?editors=1100

Answer 3

使用此transform: translate(-50%, -50%) rotate(-45deg);

＆＃13;

#wrap {
	position: relative;
	transform: rotate(45deg);
	top: 150px;
	background-color: blue; 
	height: 300px;
	width: 300px;
	margin:0 auto;
}

h1 {
    position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(-45deg);
}

＆＃13;

<html>
  <body>
    <div id="wrap"><h1>some centered text</h1></div>
  </body>
</html>

＆＃13;

Answer 4

您可以将h1封装在另一个div

中来实现这一目标

#wrap {
  position: relative;
  transform: rotate(45deg);
  top: 150px;
  background-color: blue;
  height: 300px;
  width: 300px;
  margin: 0 auto;
}
#text {
  position: absolute;
  height: 300px;
  width: 300px;
  transform: translate(-50%, -50%);
  transform: rotate(-45deg);
  background-color: red;
}
h1 {
  text-align: center;
  line-height: 300px;
  margin: 0; /* H1 has default margin, read more: https://www.w3.org/TR/html-markup/h1.html *
}

<html>

<body>
  <div id="wrap">
    <div id="text">
      <h1>some centered text</h1>
    </div>
  </div>
</body>

</html>

Answer 5

如果您愿意修改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;
}

旋转div内的中心文本

5 个答案: