How to center my bootstrap div in the middle of screen? - html

Question

I want to center following divs in the middle of the screen HORIZONTALLY AND VERTICALLY (2 SITES). What should I add to my HTML code to make it works? I managed to center div from first site vertically by adding justify-content-center class to 2nd div, but the same is not working for second site.
first site
<div class="container">
<div class="row justify-content-center">
<div class="form-group col-md-4">
<form method="post" th:object="${redirectionDto}">
<div class="form-group">
<label for="urlinput">URL</label>
<input type="text" id="urlinput" class="form-control" th:field="*{url}" name="urlinput"
maxlength="255"/>
</div>
<div class="form-group">
<label for="date">Date:</label>
<div class="input-group date" id="datetimepicker1" data-target-input="nearest">
<input type="text" class="form-control datetimepicker-input" data-target="#datetimepicker1"
th:field="*{expireDate}" id="date" placeholder="Date"/>
<div class="input-group-append" data-target="#datetimepicker1" data-toggle="datetimepicker">
<div class="input-group-text"><i class="fa fa-calendar-alt"></i></div>
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit form</button>
</form>
</div>
</div>
</div>
second site
<div class="container">
<label>Short link: </label>
<p th:text="${redirectionDto.alias}"></p>
<label>Expire date: </label>
<p th:text="${#dates.format(redirectionDto.expireDate, 'dd/MM/yyyy h:mm a')}"></p>
<a th:href="#{/}" class="btn btn-primary">Return</a>
</div>

Answer 1

Wrap it like so:
<div class="container">
<div class="row justify-content-center">
<!-- START THE DIV -->
<label>Short link: </label>
<p th:text="${redirectionDto.alias}"></p>
<label>Expire date: </label>
<p th:text="${#dates.format(redirectionDto.expireDate, 'dd/MM/yyyy h:mm a')}"></p>
<a th:href="#{/}" class="btn btn-primary">Return</a>
</div>
<!-- /END THE DIV -->
</div>

Answer 2

how i normally align <div>s to the centre is by using margins, so using some maths, you would do:
full width of page (say, 100%) - div width, then half this, that's your left margin. then do the same for height, that's your top margin.
this has mostly worked in my experience. hope i am of help!

Answer 3

Can you please check the below code? Hope it will work for you.
If you want to place your content in middle both horizontally and vertically then flex utility classes are very helpful.
In your First site code, you have used justify-content-center with class="row" which centers the content horizontally, if you will use align-items-center class along with it then the content will be centered vertically. In this case, if you will give a particular height to your .row class then you can see the content div in the center.
<div class="row justify-content-center align-items-center">
</div>
.container .row {
height: 100vh;
}
In your Second site, you need to wrap your content in a div and need to give the same classes "row justify-content-center align-items-center" to its parent div similarly as you give it in your first site code.
Please refer to this link:
1st Site:
https://jsfiddle.net/yudizsolutions/schgm9xk/
2nd Site:
https://jsfiddle.net/yudizsolutions/tk2eqdsx/