How do I center a div and change the space between elements in a form?

Question

I a creating a website with a form, that is aligned in the middle of the page horizontally. But I am unsure how to center it vertically. It may be that parameters in either the CSS or the HTML are the problem. What can I do to get this done?

I want the separation between the underlying divs to occur exactly in the middle of the mentioned text field and the paragraph. To accomplish this, I also need to increase the space between them! How do I do that?

This is how it looks:

Image of the div in question.

CIApp.html

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
<div id=gitForm>
  <div class="text-left">
    <form class="col-sm-10 form-group-lg">
      <div class="form-group">
        <div class="projectNameContainer">
          <label id="nameLabel" class="from-control-label" for="projectNameInput">Name your
                                project</label>
          <input type="text" class="form-control form-control-lg" id="projectNameInput">
        </div>
      </div>
      <div class="form-group">
        <div class="gitRepoContainer">
          <label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git
                                repository</label>
          <input type="text" class="form-control form-control-lg" id="repoInput">
        </div>
      </div>
      <button class="btn btn-outline-success" id="submitRepo" onclick="storeRepo()" type="submit">
                        Submit
                    </button>
    </form>
  </div>
</div>

CSS

#gitForm {
  border-radius: 25px;
  background: rgba(0, 0, 0, 0.8);
  position: absolute;
  top: 46.5%;
  margin-left: auto;
  padding-bottom: 0.5%;
  max-height: 20%;
  width: 25%;
  color: #333333;
  overflow: hidden;
  align-items: center;
  justify-content: space-around;
  display: flex;
  float: none;
}

Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) and several others found by searching SO. — Rob, Oct 18 '17 at 12:31
there is dedicated class for this https://v4-alpha.getbootstrap.com/utilities/flexbox/ , use them. Then tell us where it fails if it still does. absolute might not be needed .... — G-Cyrillus, Oct 18 '17 at 12:37

score 0 · Answer 1 · answered Oct 18 '17 at 12:29

Looking at your image i think you are talking about horizontally centered. So, presuming that you can give class like class = "col-md-offset-4" in the div tag of this form like.

<div class="form-group">
                <div class="col-md-offset-4 gitRepoContainer">
                    <label id="gitLabel" class="from-control-label" for="repoInput">Enter you Git
                        repository</label>
                    <input type="text" class="form-control form-control-lg" id="repoInput">
                </div>
            </div>

bootstrap 4 also have a `justify-center` class to align children according to flex-direction ;) — G-Cyrillus, Oct 18 '17 at 12:41

score 0 · Answer 2 · answered Oct 18 '17 at 14:00

0

This is a duplicate (which I did not know). Thank you @Rob for pointing me in the right direction!

answered Oct 18 '17 at 14:00

josefdev

703
4
10
22

How do I center a div and change the space between elements in a form?

2 Answers2