"Place text at the center of a div that is rotated

Question

"Place text at the center of a div that is rotated

I'm facing the challenge of centering a heading both vertically and horizontally within a div that has been rotated 45 degrees (transform:rotate(45deg);). Due to this rotation, I have attempted to counteract it by rotating the heading in the opposite direction (transform:rotate(-45deg);) and then applying typical centering techniques, but without success. What would be the solution for achieving this?

#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);
}

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

html css

Answer 1

Answer №1

Within your h1 tag, you have defined the following style:

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

The issue here is that by overriding the initial transform property with the rotate(), you are losing the centering effect achieved by the negative translate(). It's recommended to chain both transformations together like this:

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

Additionally, make sure to remove the default margin that is applied to the h1 element (try removing it in the demo to see the impact).

For a visual example, visit: http://codepen.io/anon/pen/jWjxeW?editors=1100

Answer 2

Within your h1 tag, you have defined the following style:

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

The issue here is that by overriding the initial transform property with the rotate(), you are losing the centering effect achieved by the negative translate(). It's recommended to chain both transformations together like this:

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

Additionally, make sure to remove the default margin that is applied to the h1 element (try removing it in the demo to see the impact).

For a visual example, visit: http://codepen.io/anon/pen/jWjxeW?editors=1100

Answer 3

Answer №2

It is recommended to include multiple transform functions one after the other.
A slight modification was made to your CSS, including the addition of text-align: center;

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

#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;
}

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

Answer 4

It is recommended to include multiple transform functions one after the other.
A slight modification was made to your CSS, including the addition of text-align: center;

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

#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;
}

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

Answer 5

Answer №3

try out this CSS snippet for rotation and centering:

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

#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);
}

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

Answer 6

try out this CSS snippet for rotation and centering:

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

#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);
}

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

Answer 7

Answer №4

To accomplish this, simply nest your h1 within another 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 8

To accomplish this, simply nest your h1 within another 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 9

Answer №5

If you're looking to set a specific height and width for your h1 elements, try using the following CSS code:

h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg);
    height: 100px;
    line-height: 35px;
    width: 130px;
    margin-top: -50px;
    text-align: center;
    margin-left: -65px;
}

Answer 10

If you're looking to set a specific height and width for your h1 elements, try using the following CSS code:

h1 {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: rotate(-45deg);
    height: 100px;
    line-height: 35px;
    width: 130px;
    margin-top: -50px;
    text-align: center;
    margin-left: -65px;
}

"Place text at the center of a div that is rotated

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Color the text differently if the values are not the same (CSS and jQuery only)

SVG Mask not functioning properly with SVGs created in Illustrator (in all web browsers)

After refreshing the page, RouterLinkActive in Angular 6 fails to work

Embedding a video element results in an unexpected increase in height

Loading indicator for buttons

Implement a fullscreen hero image on a specific blogroll template page in Wordpress

What is the best method to deallocate and remove the background-color property of CSS once it has been defined?

Designing a unique CSS border for custom list item bullets

Obtaining the URL from the anchor tag

Using Javascript and jQuery, populate a dropdown menu with options that are extracted from a different dropdown menu

Ways to prevent hidden fields from being submitted in a form?

"Overlooked by z-index, absolutely positioned overlay causes confusion

Adjusting the CSS class name based on the screen size and applying styles to that class only during the "onload" event

Adjusting the alignment of Bootstrap navbar items upon clicking the toggle button

Best practices for evenly distributing images within a navigation bar?

Malfunctioning carousel

Transferring scope between pages without the need for an angular service definition

Top 10 SQL Query based on two specific columns

What are some methods for converting data from data tables into alternative formats?

Enhancing the appearance of a JSX component in React