Center an HTML element

Question

I'm attempting to center an HTML Cointainer through CSS. I've seen ways to center, such as the following:

#container{
   ...
   margin: 0 auto;
   ...
}

or

#container{
   ...
   position: relative;
   ...
}

but the HTML element still remains at the top left corner. I guess there's something wrong with the HTML code, but can't figure out what.

body {
  text-align: center;
  position: absolute;
  font-family: Roboto;
  background-repeat: no-repeat;
  background-image: url(backgroung-image1.png);
  background-size: cover;
}

h1 {
  text-align: center;
  width: max-content;
}

#container {
  margin: 100px auto;
  width: auto;
  height: auto;
  position: absolute;
}

button {
  color: white;
  font-size: 15px;
  background-color: rgb(165, 42, 42);
}

<div id="container">
  <h1> Tip Calculator</h1>
  <div id="calculator">
    <!--text box-->
    <form>
      <p>How much was your bill?</p>
      <input type="text" id="billSum" placeholder="Bill in $">
      <p>How was the service?</p>
      <select id="serviceReview">
        <option disabled selected value="0">Choose a review</option>
        <option value="0.3">Exellent</option>
        <option value="0.2">Good</option>
        <option value="0.15">Ok</option>
        <option value="0.10">Bad</option>
        <option value="0.5">Terrible</option>
      </select>
    </form>
    <p>How many people share the bill?</p>
    <p>
      <input type="text" placeholder="Number of people" id="numberOfPeople"> people
    </p>
    <button type="button" id="calculateBtn">Calculate</button>
  </div>
  <!--tip-->
  <div id="tipSection">
    <p id="tip"> each</p>
  </div>
</div>

Comment regarding possible duplicate

After posting the question, another question was suggested to be answering my question. After trying the solution in the aforementioned question, the element was centered horizontally, but not vertically. I had to add dimensions of 100px so that the element would be centered vertically as well.

Partially. I had to add dimensions to the margin property. I added 100px. There's probably a way to center it without adding dimensions, but that's good enough. — random, Feb 08 '20 at 13:47
all the duplicates I added deal with horizontal and vertical centring. You have more than 100 answers and none of the below answers is bringing something new. To bad I was only restricted to 5 duplicates because I can add more — Temani Afif, Feb 08 '20 at 13:59
@TemaniAfif actually the op was looking for an horizontal centering without specifying any width (that was not clear in the question, not surprising for a beginner) . display:table;margin:auto; flex box or width:max-content would have been appropriate duplicate here . ;) — G-Cyrillus, Feb 08 '20 at 14:15
@G-Cyr yes already posted in many of the duplicates I added, ex: https://stackoverflow.com/a/10568273/8620333 / https://stackoverflow.com/a/25776315/8620333 — Temani Afif, Feb 08 '20 at 14:16
@G-Cyr the position is also useful because we can also center using position:absolute without setting a width and I saw him commenting on some answers about vertical centring so I added one at the end for him. He also made an edit talking about vertical centring. — Temani Afif, Feb 08 '20 at 14:21
@TemaniAfif its vertical centering ended up with margin-top to a fixed height . this the unclear part of the question ;) — G-Cyrillus, Feb 08 '20 at 14:23

score 0 · Answer 1 · answered Feb 08 '20 at 13:10

0

You can write in your container width: 50% ; heigth: whatever you want ; and margin auto and that should fix your problem

answered Feb 08 '20 at 13:10

Joao Aniceto

11

After I changed the code as you suggested, the text is still at the left side of the screen, and now it is stretched vertically. – random Feb 08 '20 at 13:19

score 0 · Answer 2 · answered Feb 08 '20 at 13:13

0

I would try:

#container{
    position:absolute;
    left:30%;
    width:40%;
}

Set your width to whatever you want and your left will be -> 50% - width/2

The % just scales it by window size.

answered Feb 08 '20 at 13:13

Danyman

63
1
9

G-Cyrillus · Answer 3 · 2020-02-08T13:22:00.073

You can easily use flex and forget about position not really made for this :

basic example (run snippets in full page to see and test behavior):

html {height:100vh;display:flex;}
body {margin:auto;/* instead align-items:center;justify-content:center; on HTML to avoid unwanted side effects */}

 <div id="container">
        <h1> Tip Calculator</h1>
        <div id="calculator">
            <!--text box-->
            <form>
                <p>How much was your bill?</p>
                <input type="text" id="billSum" placeholder="Bill in $">
                <p>How was the service?</p>
                <select id="serviceReview">
                    <option disabled selected value="0">Choose a review</option>
                    <option value="0.3">Exellent</option>
                    <option value="0.2">Good</option>
                    <option value="0.15">Ok</option>
                    <option value="0.10">Bad</option>
                    <option value="0.5">Terrible</option>
                </select>
            </form>
            <p>How many people share the bill?</p>
            <p>
                <input type="text" placeholder="Number of people" id="numberOfPeople"> people
            </p>
            <button type="button" id="calculateBtn">Calculate</button>
        </div>
        <!--tip-->
        <div id="tipSection">
            <p id="tip"> each</p>
        </div>
    </div>

basic example mixed with your code (position and sizing removed) Also to test in full page and resizing the window:

html {height:100vh;display:flex;}
body {margin:auto;/* instead align-items:center;justify-content:center; on HTML to avoid unwanted side effects */}

/* ============  your code  ============ */
body{
    text-align: center;
    /* position: absolute; NO NEED */
    font-family: Roboto;
    background-repeat: no-repeat;
    background-image: url(backgroung-image1.png);
    background-size: cover;
}
h1{
    text-align: center;
    width: max-content;
}
#container  {
/* nothing needed here for centering */
}
button{
    color: white;
    font-size: 15px;
    background-color: rgb(165, 42, 42);
}

<div id="container">
        <h1> Tip Calculator</h1>
        <div id="calculator">
            <!--text box-->
            <form>
                <p>How much was your bill?</p>
                <input type="text" id="billSum" placeholder="Bill in $">
                <p>How was the service?</p>
                <select id="serviceReview">
                    <option disabled selected value="0">Choose a review</option>
                    <option value="0.3">Exellent</option>
                    <option value="0.2">Good</option>
                    <option value="0.15">Ok</option>
                    <option value="0.10">Bad</option>
                    <option value="0.5">Terrible</option>
                </select>
            </form>
            <p>How many people share the bill?</p>
            <p>
                <input type="text" placeholder="Number of people" id="numberOfPeople"> people
            </p>
            <button type="button" id="calculateBtn">Calculate</button>
        </div>
        <!--tip-->
        <div id="tipSection">
            <p id="tip"> each</p>
        </div>
    </div>

margin:auto will center a flex child in its flex parent without going hiding up or too far left(or right if dir is rtl) .

Great. Now the text is centered horizontally, yet it's still at the top of the page. How can it be centered vertically? — random, Feb 08 '20 at 13:31
@random run it in full page and see it center when it's height becomes less than the window , if it is about margin, add a margin-top : xxx , but then it is not about centering but putting down a value — G-Cyrillus, Feb 08 '20 at 13:33
I added dimensions to the margin property of the body: 100px. `body{margin:100px auto}`. Now it's centered vertically. Thanks! — random, Feb 08 '20 at 13:41
@random if this is your answer, you can selectit as it is and even upvote it ;) Welcome On SO — G-Cyrillus, Feb 08 '20 at 14:17

score 0 · Answer 4 · answered Feb 08 '20 at 13:21

Position relative itself will not center an element. You need to make sure the element you need to center is a block element for margin: 0 auto to work.

.parent {
  border: 1px solid;
  padding: 10px;
}

.child {
  border: 1px solid green;
  width: 50%;
  margin: 0 auto;
}

<div class="parent">
  <div class="child">This is child</div>
</div>

Another way is to make child element an inline or inline-block and use text-align: center on parent.

.parent {
  text-align: center;
  padding: 10px;
  border: 1px solid;
}

.child {
  border: 1px solid green;
}

.i-block {
  display: inline-block;
}

<div class="parent">
  <div class="child i-block">
    This is inline child
  </div>
</div>

score 0 · Answer 5 · answered Feb 08 '20 at 13:22

try this in your css file:

body {
/* position: absolute; */
font-family: Roboto;
background-repeat: no-repeat;
background-image: url(backgroung-image1.png);
background-size: cover;
}

/* h1 {
text-align: center;
width: max-content;
} */

#container {
margin: 100px auto;
width: auto;
height: auto;
/* position: absolute; */
padding: 70px 0;
text-align: center;
}

button {
color: white;
font-size: 15px;
background-color: rgb(165, 42, 42);
}

look at https://www.w3schools.com/css/css_align.asp

DohaHelmy · Answer 6 · 2020-02-08T14:20:20.677

In your case as long as you want to use margin: auto, so no need to set position to absolute neither for body or #container you only need to set width of container to any value required and margin will work.

body {
  text-align: center;
  position: relative;
}

h1 {
  text-align: center;
}

#container {
  border: 1px solid red;
  width: 50%;
  margin: 10px auto;
}

button {
  color: white;
  font-size: 15px;
  background-color: rgb(165, 42, 42);
}

<div id="container">
  <h1> Tip Calculator</h1>
  <div id="calculator">
    <!--text box-->
    <form>
      <p>How much was your bill?</p>
      <input type="text" id="billSum" placeholder="Bill in $">
      <p>How was the service?</p>
      <select id="serviceReview">
        <option disabled selected value="0">Choose a review</option>
        <option value="0.3">Exellent</option>
        <option value="0.2">Good</option>
        <option value="0.15">Ok</option>
        <option value="0.10">Bad</option>
        <option value="0.5">Terrible</option>
      </select>
    </form>
    <p>How many people share the bill?</p>
    <p>
      <input type="text" placeholder="Number of people" id="numberOfPeople"> people
    </p>
    <button type="button" id="calculateBtn">Calculate</button>
  </div>
  <!--tip-->
  <div id="tipSection">
    <p id="tip"> each</p>
  </div>
</div>

Centering elements can be done using multiple methods.

refer to examples below

using `margin: auto`

this will work for block elements

#container {
  border: 1px solid red;
  height: 100px;
}

#element {
  background-color: yellow;
  width: 12%;
  margin: 30px auto;
}

<div id="container">
  <div id="element">ELEMENT</div>
</div>

using `text-align: center;`

this will work for inline elements.

#container {
  border: 1px solid red;
}

#element {
  text-align: center;
  background-color: yellow;
}

<div id="container">
  <div id="element">ELEMENT</div>
</div>

using `position: absolute`

but it is not recommended to use position: absolute as it takes elements out of the flow and it causes mess to other elements. so use it in limited situations.

#container {
  position: relative;
  border: 1px solid red;
  height: 50px;
}

#element {
  background-color: yellow;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div id="container">
  <div id="element">ELEMENT</div>
</div>

using `flexbox`

It is a handy and easy way to center elements both horizontally and vertically and with multiple elements included.

#container {
  display: flex;
  justify-content: center;
  border: 1px solid red;
  height: 50px;
  align-items: center;
}

#element {
  background-color: yellow;
}

<div id="container">
  <div id="element">ELEMENT</div>
</div>

using `grid`

another easy and handy method to center elements

#container {
  display: grid;
  border: 1px solid red;
  height: 30px;
}

#element {
  background-color: yellow;
  margin: auto;
}

<div id="container">
  <div id="element">ELEMENT</div>
</div>

Use this Guide to learn more aboute centering.

you forgot about position:relative and/or transform:translate() with margins . ;) Personnaly i do not advise position for beginners ... — G-Cyrillus, Feb 08 '20 at 13:35
@G-Cyr those the ones I usually use. and I don't like using positioning elements. it makes a mess so I prefer simple other methods :')) — DohaHelmy, Feb 08 '20 at 13:37

score 0 · Answer 7 · edited Feb 08 '20 at 16:31

0

you just do this, all the things in container will center.

horizontally

#container {
    display: flex;
    justify-content:center;
}

vertical

#container {
    display: flex;
    align-items:center;
}

edited Feb 08 '20 at 16:31

DohaHelmy

770
1
7
19

answered Feb 08 '20 at 13:49

Le Huu An

11
1

score -1 · Answer 8 · answered Feb 08 '20 at 13:13

-1

You haven't imported your css into your html script, that why the rules you wrote are not working. Import the css like this

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="<path to css file>">
</head>
<body>
<!-- your html body -->
</body>
</html>

answered Feb 08 '20 at 13:13

Saifullah

11
2

That's just how Stackoverflow snippets work, and has nothing to do with the problem. – connexo Feb 08 '20 at 13:45

Center an HTML element

8 Answers8

Centering elements can be done using multiple methods.

using margin: auto

using text-align: center;

using position: absolute

using flexbox

using grid