CSS / HTML: How to center div horizontally?

Question

I know this question has been asked hundreds of times, but for some reason I cant get it to work. Both my HTML and CSS is rather simple, but I cant seem to center the div (livechat-wrapper) horizontally.

I just want the div to be as wide as the textarea, and placed just above the textarea, but it is "stuck" to the left side of my view.

Any ideas on how to do this?

<body >
  <div class="livechat-wrapper">

  </div>
  <form>
    <textarea maxlength="400" rows="1"id="input_field" class="input_field" type="text" name="q" placeholder="Write a message..."></textarea>
  </form>

</body>

* {

    box-sizing: border-box;
    font-family: "Nunito", sans-serif;
  }
  
  html, body {
    background: linear-gradient(to bottom right, #FDFCFB, #E2D1C3);
    /*linear-gradient(to bottom right, #FDABDD, #374A5A);*/

    width: 800px;
    height: 600px
  }

form {
    display: flex;
    flex-direction: row;
    justify-content: center;
    position: absolute;
    bottom: 0;
    left: 0; 
    right: 0;
    padding-bottom: 10px;

}
.input_field {
    background: rgba(255, 255, 255, 0.4);
    border-radius: 10px;
    width: 90%;
    border: none;
    padding: 1.2em;
    outline: none;
    font-weight: 400;
    box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
    border: none;
    resize: none; 
    outline: none;
  }

.livechat-wrapper {
    background: rgba(255, 255, 255, 0.4);
    box-shadow: 1px 1px 1px black, -0.5px -0.5px white;
    height: 80%;
    width: 90%;
    border-radius: 10px;
    border: 0.05em solid red;
    display: flex;
    flex-direction: row;
    justify-content: center;

 
}

I tried using on the div, but with no luck

display: flex;
flex-direction: row;
justify-content: center;

wrap the div in a wrapper div and give it a height of 100% and then give this div display: flex. You have given flex to ur main div which is of no use coz that will only affect its children not that div itself. — Anas Mohammad Sheikh, Jan 22 '23 at 16:44

score 1 · Accepted Answer · answered Jan 22 '23 at 16:34

There are several ways to center a div horizontally using CSS. Here are a few examples:

Using margin: auto:

div {
  width: 50%; /* or any other width */
  margin: 0 auto;
}

This method works by setting the left and right margins to auto, which will push the div to the center of the parent element.

Using Flexbox:

div {
  display: flex;
  justify-content: center;
}

This method works by using the justify-content property to center the div within the parent element

Using Grid:

div {
  display: grid;
  place-items: center;
}

This method works by using the place-items property to center the div within the parent element.

Using transform: translate:

div {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

Using flexbox, didnt work in my case. But the other methods, work just fine. Thanks for the help — N G, Jan 22 '23 at 16:44

score -1 · Answer 2 · answered Jan 22 '23 at 16:57

The body has a width of 800px however that doesn't affect the form due to absolute positioning. So you will want to remove the width on the body. Also the div is limited to 90% width. So you can either change that to 100% and add box-sizing: border-box; to correct for margins or add margin: auto; which should center it on the page.

score -1 · Answer 3 · answered Jan 22 '23 at 17:45

-1

Try adding this to the your CSS

body {
    display: flex;
    justify-content: center;
    width: 800px;
}

.livechat-wrapper {
    margin: auto;
    width: 90%;
}

answered Jan 22 '23 at 17:45

SulimanBenhalim

7
2

CSS / HTML: How to center div horizontally?

3 Answers3