Position a diagonal title in the center of the page-CodePudding

I am trying to make this diagonal title be centered in the page both horizontally and vertically, I already tried several methods including this one but nothing worked.

.houses {
   transform: rotate(-45deg);
   text-align: center;
   letter-spacing: 5rem;
}

<body>
 <h1 >HOUSES</h1>
</body>

CodePudding user response：

Your h1 can be centered easily using 2 methods:

display:block; margin: 0 auto; like so:

.houses {
   transform: rotate(-45deg);
   text-align: center;
   letter-spacing: 5rem;
   display: block;
   margin: 0 auto;
}

Or text-align:center; in the css like so:

...looking at your snippet though you already had this option implemented. It is centered but you place it at an angle (look at the highlighted item and you will see, it spans the whole area while centered).

.houses {
   transform: rotate(-45deg);
   text-align: center; /* already there */
   letter-spacing: 5rem;
}

Outside of these options, I think you should rephrase the question about what you need with your angled text. Happy to help past that, centering items is normally very simple (the 2 options I describe, then some type of margin offset if needed)

In terms of vertical aligned, it is unclear what you want. Do you want it 50% of the page or what? -- you have no other elements defined so it is hard to judge.

Here is a solid article on valign: https://rocketvalidator.com/html-validation/the-valign-attribute-on-the-td-element-is-obsolete-use-css-instead

CodePudding user response：

Using flexbox

In order to take full height of body i.e 100% you need to set height: 100% on html as well. (or you can use height: 100vh)

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.houses {
  transform: rotate(-45deg);
  text-align: center;
  letter-spacing: 5rem;
}

<h1 >HOUSES</h1>

Using grid

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  display: grid;
  place-items: center;
}

.houses {
  transform: rotate(-45deg);
  text-align: center;
  letter-spacing: 5rem;
}

<h1 >HOUSES</h1>

or using position: absolute

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
}

.houses {
  position: absolute;
  top: 50%;
  left: 50%;
  text-align: center;
  letter-spacing: 5rem;
  transform: translate(-50%, -50%) rotate(-45deg);
}

<h1 >HOUSES</h1>