How to responsively center a form inside another div (vertically and horizontally)

Question

I've been trying my best to center a div that contains a form .form-group inside another div #myCarousel, responsively both vertically and horizontally. (works across different device widths)

I've tried absolute positioning with pixels, percentage - but that didn't work. I tried making the form a child element inside the #myCarousel, but I wasn't able to make it work.

My goal is to make the form in the exact center of the caraousel (over the image slider) and have the images sliding in background, while the form stays fixed in the center.

Here is what my code looks like. Codepen Link

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
</div>
<div class="form-group">
  <form action="thank-you.php" method="post">
    <input class="form-control" type="text" name="name" placeholder="Enter your name">
    <input class="form-control" type="text" name="mobile" placeholder="Enter mobile number">
    <input class="form-control" type="text" name="email" placeholder="Enter your email address">
    <input class="form-control" type="text" name="address" placeholder="Enter your area and landmark">
    <select id="multi-select" name="products[]" multiple="multiple">
      <option value="product1">Product 1</option>
      <option value="product2">Product 2</option>
      <option value="product3">Product 3</option>
    </select>
    <input type="submit">
  </form>
</div>

I'd be glad if you'll could guide me here.

score 1 · Answer 1 · answered Mar 21 '18 at 06:27

1

Add this to your form-group class.

.form-group{
    max-width: 300px;
    margin: auto;
   }

answered Mar 21 '18 at 06:27

Allan Jebaraj

998
6
20

This centers the form below the #myCarousel div. I need to center it vertically as well (within the #myCarousel div) – Rahul Makhija Mar 21 '18 at 07:19

donmckenna · Answer 2 · 2018-03-21T06:44:45.923

1

#myCarousel {
  display: flex;
  justify-content: center;
  align-items: center;
}

Sticking <div class="form-group"> inside <div id="myCarousel"> should make .form-group vertically and horizontally centered inside #myCarousel.

CSS Tricks has a good overview

edited Mar 21 '18 at 06:44

answered Mar 21 '18 at 06:32

donmckenna

164
6

I had tried this initially, the image slider and form are placed side by side (as they both are children of the #myCarousel div). – Rahul Makhija Mar 21 '18 at 07:18

score 1 · Accepted Answer · answered Mar 21 '18 at 06:39

1

Well first you will need to place the .form-group div inside of your #myCarouse div and then using position: absolute and transform trick you can align it vertically and horizontally center

HTML

<div id="myCarousel" class="carousel slide" data-ride="carousel">
  ...
  <a class="right carousel-control" href="#myCarousel" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span><span class="sr-only">Next</span></a>
  <div class="form-group">
    ...
  </div>
</div>

CSS

#myCarousel .form-group {
  width: 300px;
  width: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  padding: 10px;
}

Updated Codepen

answered Mar 21 '18 at 06:39

Bhuwan

15,392
4
26
50

Wow! Thanks that exactly what I was looking for. I didn't use transform: translate(-50%, -50%); earlier. Could you please explain what it does? – Rahul Makhija Mar 21 '18 at 07:27
@RahulMakhija `left:50%` and `top:50%` translate the element with respect to the parent width and height but using only this you can't center it...Now you will need to use `transform: translate(-50%,-50%)` to translate with respect to its own height and width height...[**Read this**](https://css-tricks.com/centering-percentage-widthheight-elements/) – Bhuwan Mar 21 '18 at 07:32
Thanks for the article. I found it slightly complex. This article has a better explanation https://css-tricks.com/quick-css-trick-how-to-center-an-object-exactly-in-the-center/ – Rahul Makhija Mar 21 '18 at 07:44
@RahulMakhija the reason of the translate have nothing to do with the width and height ... top/left consider the top-left corner of the element ... so by using top;50% and left:50% you will center the top-left corner of the div inside the parent BUT we need it to consider the center point of our element and to do so we use a negative tranlation which is ONLY a visual effect to translate the center point in the place of the top-left corner [or we can do it with negative margin] – Temani Afif Mar 21 '18 at 08:43
by the way better flag the question as duplicate and avoid having the same question again and again and again and .... – Temani Afif Mar 21 '18 at 08:44
@TemaniAfif Actually align center the div is a part of the answer...the another part was placing the div inside the carousel div that why I didn't raise a flag for it... – Bhuwan Mar 21 '18 at 08:50
he said *I tried making the form a child element inside the #myCarousel, but I wasn't able to make it work.* --> so i don't think placement is the issue here and even if it was the issue the problem is the same, centering a div vertically/horizontally and you can clearly notice that your answer and ther other answer are exactly the same asnwer provided in the duplicate question ... also the funny thing is that if the OP open his eyes around the site he will see all the duplicate question are in the right sidebar of his own question even before i close it. – Temani Afif Mar 21 '18 at 08:55
@TemaniAfif I tried my best searching for a solution yesterday, but didn't find it. Most of the suggested duplicate posts solution didn't work for me and don't have the part of transform: translate(-50%, -50%), therefore I believe its not a duplicate. – Rahul Makhija Mar 21 '18 at 09:48
@RahulMakhija from the first question i marked as duplicate you can see this : https://stackoverflow.com/a/23714832/8620333 ... so a search need to be a deep search, not only stick to the question and the accepted answer, you need to check ALL the answers, ALL the comments ALL the related links and external links ... and you question is a perfect duplicate. As you can see the answer i link in this comment is exactly the same provided here – Temani Afif Mar 21 '18 at 10:47
@RahulMakhija and you know what, this question i marked as duplicate appear to be the first question put as related to your question, so i don't even need to mark as duplicate, you simply need to look on the right side of the question or better, before posting the question you get these related questions but am pretty sure you ignored them – Temani Afif Mar 21 '18 at 10:49
@RahulMakhija and here is more if you want. if i write in google "css center div vertically horizontally" i get all the SO question and i get this link as the second result https://css-tricks.com/centering-css-complete-guide/ .. and guess what, you will find also there the same method using transform answered here and answered in the duplicate ---> so don't tell me you question is not a duplicate or it's a new issue you discovered, it's a commong situation you can found everywhere – Temani Afif Mar 21 '18 at 10:52

score 0 · Answer 4 · answered Mar 21 '18 at 06:25

0

margin:0px auto or position :absolute;left:50%;top:50%; to center

answered Mar 21 '18 at 06:25

Killer

49
3

score 0 · Answer 5 · answered Mar 21 '18 at 06:42

0

You need to put .form-group inside #myCarousel.

.form-group {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

}

answered Mar 21 '18 at 06:42

Arun Mathew

59
6

Yes this works! – Rahul Makhija Mar 21 '18 at 07:36

score 0 · Answer 6 · answered Mar 21 '18 at 06:55

Try this in your CSS:

.slider-container {
  position: relative;
}
.form-group { # you should add and define css for custom class instead of overide Bootstrap class.
  margin: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -150px;
}

and HTML:

<div class="slider">
  <div id="myCarousel" class="carousel slide" data-ride="carousel">
    .....
  </div>
  <div class="form-group">
    <form></form>
  </div>
</div>

How to responsively center a form inside another div (vertically and horizontally)

6 Answers6