Position the component at the center of another component

Question

Position the component at the center of another component

Looking to center a component inside another component. I have a div with two components - the main one and a banner that I want to display in the center of the main component. Check out my issue on this jsfiddle:

https://jsfiddle.net/CanadianDevGuy/vjb4k9un/38/

<div id="app">
  <first></first>
  <second></second>
</div>

Picture showing current layout

The main div with white border needs to align exactly with the first component (black one) without any space at the bottom.

I also added 'display: relative' because I need the red component to follow the black one while remaining centered.

javascript css vue.js

Answer 1

Answer №1

SOLUTION

If you want the child element to match the dimensions of its parent, you can achieve this by first setting the width and height of the parent element, then making the child element occupy the full width and height inside the parent.

#container {
    border: 3px solid black;
    width: 300px;
    height: 300px;
}
#child {
    background-color: blue;
    color: white;
    width: 100%;
    height: 100%;
}
#inner-child {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: green;
    color: white;
    width: 50px;
    height: 50px;
}

Answer 2

SOLUTION

If you want the child element to match the dimensions of its parent, you can achieve this by first setting the width and height of the parent element, then making the child element occupy the full width and height inside the parent.

#container {
    border: 3px solid black;
    width: 300px;
    height: 300px;
}
#child {
    background-color: blue;
    color: white;
    width: 100%;
    height: 100%;
}
#inner-child {
    position: absolute;
    top: 50px;
    left: 50px;
    background-color: green;
    color: white;
    width: 50px;
    height: 50px;
}

Answer 3

Answer №2

I attempted to fulfill the requirements by adjusting the height of the parent element.

You can view the Vue implementation of this solution here https://jsfiddle.net/9d0vhs3y/

Below is the code snippet demonstrating the pure HTML/CSS version:

html {
  height: 100%;
}

#app {
  border: 4px solid white;
  position: absolute;
  height: 300px;
}

body {
  background-color: grey;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#element {
  background-color: black;
  color: white;
  width: 250px;
  height: 100%;
  position: relative;
  top: 0;
}

#element2 {
  position: relative;
  bottom: calc(50% + 25px);
  background-color: red;
  border-radius: 10px;
  color: white;
  height: 50px;
}

<div id="app">
  <div id="element">First</div>
  <div id="element2">Second</div>
</div>

Answer 4

I attempted to fulfill the requirements by adjusting the height of the parent element.

You can view the Vue implementation of this solution here https://jsfiddle.net/9d0vhs3y/

Below is the code snippet demonstrating the pure HTML/CSS version:

html {
  height: 100%;
}

#app {
  border: 4px solid white;
  position: absolute;
  height: 300px;
}

body {
  background-color: grey;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#element {
  background-color: black;
  color: white;
  width: 250px;
  height: 100%;
  position: relative;
  top: 0;
}

#element2 {
  position: relative;
  bottom: calc(50% + 25px);
  background-color: red;
  border-radius: 10px;
  color: white;
  height: 50px;
}

<div id="app">
  <div id="element">First</div>
  <div id="element2">Second</div>
</div>

Answer 5

Answer №3

Here is some CSS for you to test out:

html {
  height: 100%;
}

#container {
  border: 2px solid black;
  height: 200px;
  width: 150px;
}

body {
  background-color: lightblue;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box1 {
  background-color: yellow;
  color: black;
  width: inherit;
  height: inherit;
}

#box2 {
    position: relative;
  top: 50%;
  width: inherit;
  background-color: green;
  border-radius:5px;
  color: white;
  height: 30px;
}

Answer 6

Here is some CSS for you to test out:

html {
  height: 100%;
}

#container {
  border: 2px solid black;
  height: 200px;
  width: 150px;
}

body {
  background-color: lightblue;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#box1 {
  background-color: yellow;
  color: black;
  width: inherit;
  height: inherit;
}

#box2 {
    position: relative;
  top: 50%;
  width: inherit;
  background-color: green;
  border-radius:5px;
  color: white;
  height: 30px;
}

Answer 7

Answer №4

Adjust the height of #app to 250px so that extra space at the bottom is eliminated and the second component can be centered properly.

[insert image description here][1]

Answer 8

Adjust the height of #app to 250px so that extra space at the bottom is eliminated and the second component can be centered properly.

[insert image description here][1]

Position the component at the center of another component

Answer №1

SOLUTION

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to capture a screenshot using selenium in conjunction with synchronous JavaScript?

Juggling numerous pages in a React application

Incorporating S3 images into vanilla JavaScript within a Django storages environment

The error "navigator.permissions.query is not a defined object" is encountered in the evaluation

Observing changes in the dimensions of flex children using MutationObserver

What is the method for implementing tooltips using JQuery?

Numerous buttons activating a single modal component

creating a distinct angular service for every controller

Loading page with asynchronous JavaScript requests

The most effective way to initiate an action following a popup

Updating a particular element within nested arrays: best practices

A tutorial on how to customize the hover effect for TableHead Column Identifiers in MaterialUI by adjusting

Dynamic, adaptable, and expandable tiles that effortlessly span the full width of the screen

Tips for aligning pagination in the MUI v5 table component and creating a fixed column

React Material UI issue: You cannot render objects as a React child. If you intended to display a group of children, make sure to use an array instead

Tips for passing a parameter to getters in vue

Material UI fails to display any content

The width of a div element seems to mimic the width of the entire page inexplic

Conceal a Component within an Embedded Frame

Guide on converting arrays and sending this information in Node.js