How to equally center a div into another div? - html

Question

I am trying to create div which serves as my menu selection of my website. I want it to put into the center of my parent div. I did a lot of experiment but none of it work. Below is my CSS Code
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
and this is my html file
<div class="cell lt-main-menu">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
...
</div>
What i want is similar to picture below.

Answer 1

Hi i have created a pen in the CodePen app.
Using Flex you can easily center vertically and horizontally.
.lt-main-menu {
/*...*/
display:flex;
justify-content: center;
align-items: center;
}
This is the pen https://codepen.io/alessandroinfo/pen/JQPrYm

Answer 2

Try something like that, using flex properties:
<style type="text/css">
.cell {
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
margin: 10px 0;
}
</style>
<div class="cell lt-main-menu">
<div class="cell-wrapper">
<div class="lt-menu">menu 1</div>
<div class="lt-menu">menu 2</div>
<div class="lt-menu">menu 3</div>
</div>
</div>

Answer 3

Try using display: flex to align items. This is a sample code. Hope this helps
HTML
<div class="d-flex flex-row align-items-start m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
<div class="d-flex flex-row align-items-center justify-content-center m-2">
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
<div class="container-block">
</div>
</div>
CSS
.d-flex {
display: flex;
}
.flex-row {
flex-direction: row;
}
.align-items-start {
align-items: flex-start;
}
.align-items-center {
align-items: center;
}
.justify-content-center {
justify-content: center;
}
.container-block {
width: 100px;
height: 100px;
background: black;
margin: 0 5px;
}
.m-2 {
margin: 0.5rem;
}
JS Fiddle Link : https://jsfiddle.net/SJ_KIllshot/dbguqy6w/

Answer 4

This will do the job. I always find flexbox to work best for aligning things like this.
.cell {
color: white;
font-size: .8rem;
padding: 1rem;
}
.lt-main-menu {
width: 100%;
background: deepskyblue;
height: 80vh;
display: flex;
align-items: center;
justify-content: center;
}
.lt-menu {
background: black;
width: 100px;
height: 100px;
margin: 0 10px;
text-align: center;
display: inline-block;
}
Demo: https://jsfiddle.net/trethewey/qs1kvuf5/16/

Answer 5

Try this.
.cell {
position: relative;
color: white;
font-size: .8rem;
padding: 1rem;
}
.box-containers {
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
}
.lt-main-menu {
grid-area: main-menu;
background: deepskyblue;
height: 80vh;
}
.lt-menu{
background: black;
width: 100px;
height: 100px;
display: inline-block;
margin: 0 auto;
vertical-align:middle;
text-align:center;
/*
display:table-cell;
vertical-align:middle;
text-align:center;
*/
}
<div class="cell lt-main-menu">
<div class="box-containers">
<div class="lt-menu">
menu 1
</div>
<div class="lt-menu">
menu 2
</div>
<div class="lt-menu">
menu 3
</div>
</div>
</div>
You can also have some other references HERE.