How can i center an HTML element on the page using css

Question

I am trying to position an HTML element in the center of a page. I want to make the center of the element in the center of the page.

Currently, my code looks like this

#associate {
    position:absolute;
    color:white;
    background-color:red;
    margin-top:55px;
    margin-left:15%;
    margin-right:15%;
    max-width:70%;
    text-align:center;
    padding:2.5%;
    max-height:17.5%;
    border-radius:25px;
    border-style:outset;
    border-color:white;
    border-width:5px;
}

If the text in this element is long enough (enough to exceed the max-width:70%;), the element is centered on the page exactly how i want it to be. However, if the text inside this element does not exceed this max-width, the element is positioned with a 15% margin on the left.

A little while ago, when I was trying to rotate an element, I was able to choose the rotation point of the element with

transform-origin:0% 50%;
transform:rotate(90deg);

is there a similar way to choose the point in the element where it will center on the page? I would like to position the center of the element in the center of the page and have the ends of the element expand when needed to fit more text until the max-width:70%; is reached.

This is a potential duplicate of [How to center an element horizontally and vertically](https://stackoverflow.com/questions/19461521/how-to-center-an-element-horizontally-and-vertically); I'd recommend the flexbox method from the selected answer in that post. If this is not a duplicate, I would recommend updating the question with enough markup to create a [mcve], including the working and non-working cases, and explaining how this question differs from the above post. Good luck, and happy coding! — Alexander Nied, Nov 29 '21 at 19:43

score 1 · Answer 1 · answered Nov 29 '21 at 20:08

To actually center an element (as opposed to centering the text within it) you can use CSS flex on its container.

This snippet puts your element in a container which has the viewport dimensions and uses the justify-content and align-items CSS properties to center it horizntally and vertically.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100vw;
}

#associate {
  position: absolute;
  color: white;
  background-color: red;
  margin-top: 55px;
  margin-left: 15%;
  margin-right: 15%;
  max-width: 70%;
  text-align: center;
  padding: 2.5%;
  max-height: 17.5%;
  border-radius: 25px;
  border-style: outset;
  border-color: white;
  border-width: 5px;
}

<div class="container">
  <div id="associate">
    Here is some content<br> And another line of it.
  </div>
</div>

score -2 · Answer 2 · answered Nov 29 '21 at 19:52

-2

you can use text-align:center; to center the element or you can use <center></center> tag in HTML to center the element

answered Nov 29 '21 at 19:52

Iam coding

13
3

1

The center tag is deprecated now. – A Haworth Nov 29 '21 at 20:02
1

This also does not vertically center an element. – Sean Nov 29 '21 at 20:14
[MDN reference showing that the `` element has been deprecated](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/center), and noting that one should avoid using it for all new development and update any old code to remove it and replace it with standards-compliant implementations. – Alexander Nied Nov 29 '21 at 20:22

How can i center an HTML element on the page using css

2 Answers2