What will be the output of the following code having 4 divs having uni

1.	What will be the output of the following code having 4 divs having unique color and text and enclosed by single layout container class?
Answer» /* Answer / #outer { width: 300px; height: 300px; background-color: BLACK; position: relative; } #inner { width: 100px; height: 100px; background-color: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); } OUTPUT:* We have a relative position to the outer div tag and absolute position for the inner div tag. In ORDER to PLACE the inner div in the middle. We used the top and left at 50%. Using top and left the box position starts from the middle of the top and left which not exactly in the center. So, in order to keep the inner div exactly at the center, we need to use transform, which helps US to place the inner div exactly at the center of the outer div.

What will be the output of the following code having 4 divs having unique color and text and enclosed by single layout container class?

Answer»

/* Answer */ #outer { width: 300px; height: 300px; background-color: BLACK; position: relative; } #inner { width: 100px; height: 100px; background-color: red; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }

OUTPUT:

We have a relative position to the outer div tag and absolute position for the inner div tag. In ORDER to PLACE the inner div in the middle. We used the top and left at 50%. Using top and left the box position starts from the middle of the top and left which not exactly in the center. So, in order to keep the inner div exactly at the center, we need to use transform, which helps US to place the inner div exactly at the center of the outer div.

Discussion

No Comment Found

Related InterviewSolutions

Explain the rule set in CSS?
What is specificity?
Explain Gradients in CSS?
Mention types of selectors?
What are pseudo-elements? Explain with an example.
What are CSS combinators?
<div id="outer"> <div id="inner"></div> </div>
Write the style to display inner div in center for the below HTML code?
How to draw a triangle using CSS?
body { margin: 0; font-family: Arial; background-color: #f2f2f2; } .box { color: #fff; padding: 1em; text-align: center; background-color: #efefef; } .a { background-color: purple; } .b { background-color: violet; } .c { background-color: burlywood; } .d { background-color: gainsboro; } .layout { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-rows: 100vh; }