Mastering CSS: Advanced Centering Techniques Interview Quiz Quiz

1. Question 1

   Given a parent and child div, which CSS property combination correctly centers an absolutely positioned child div both vertically and horizontally inside its parent?

   1. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
   2. float: center; margin: auto; padding: 50%;
   3. display: flex; align-content: center; justify-items: center;
   4. vertical-align: middle; text-align: center;
   5. display: block; margin-left: 50%; margin-top: 50%;

2. Question 2

   When using Flexbox to center a child element in a parent container, which set of CSS properties should you apply to the parent?

   1. display: flex; align-items: center; justify-content: center;
   2. display: flexbox; align-content: center; justify-items: center;
   3. display: block; text-align: center; vertical-align: middle;
   4. display: flex; flex-direction: row; float: center;
   5. display: flex; align-content: flex-end; justify-content: flex-end;

3. Question 3

   Which one of the following is a correct and modern way to use CSS Grid to perfectly center an element inside its parent?

   1. display: grid; place-items: center;
   2. display: block; text-align: center; margin-top: 50%;
   3. display: grid; align-items: flex-start; justify-items: flex-end;
   4. display: inline-grid; align-content: middle;
   5. display: grid; margin: auto 0; padding: center;

4. Question 4

   What is the primary advantage of using the 'transform: translate(-50%, -50%)' method for centering over Flexbox or Grid?

   1. Compatibility with older browsers that do not support Flexbox or Grid.
   2. Requires less code than Flexbox or Grid.
   3. Allows for automatic text alignment within the element.
   4. Prevents any scrolling issues in overflow situations.
   5. Automatically resizes the parent container to fit the child.

5. Question 5

   Consider the following styles: '.parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }'. What is the effect of omitting 'transform: translate(-50%, -50%)'?

   1. The child will be positioned with its top-left corner at the center of the parent, not truly centered.
   2. The child will be hidden and not visible.
   3. The child will stretch to fit the parent entirely.
   4. The child will only be horizontally centered, not vertically.
   5. The child will remain in its default static position.

6. Question 6

   When centering with Flexbox, which property ensures children are centered vertically within a horizontal flex container?

   1. align-items: center;
   2. justify-items: center;
   3. flex-direction: column;
   4. text-align: center;
   5. align-content: stretch;

7. Question 7

   Which of the following is NOT a correct property or value for centering with CSS Grid?

   1. align-items: center;
   2. justify-items: center;
   3. place-items: center;
   4. vertical-align: center;
   5. display: grid;

8. Question 8

   You inherit a code base using only 'margin: 0 auto' to try to center a div. Why will this NOT center the element vertically?

   1. 'margin: 0 auto' only centers the element horizontally if it has a set width.
   2. 'margin: 0 auto' breaks vertical alignment rules in modern browsers.
   3. Vertical margins can only be set using Flexbox or Grid.
   4. Browsers ignore any margin values on block elements.
   5. 'margin: 0 auto' forces the display to inline-block, preventing vertical centering.

9. Question 9

   A developer writes '.parent { display: flex; flex-direction: column; align-items: center; justify-content: center; }' and '.child { margin-top: auto; margin-bottom: auto; }'. What is the effect?

   1. The child will be perfectly vertically and horizontally centered within the parent.
   2. Only vertical centering will apply due to the column direction.
   3. The child will not be centered because margin auto conflicts with flex centering.
   4. The child will be biased towards the bottom of the parent.
   5. The child will be removed from normal flow due to incorrect margins.

10. Question 10

    Why might a candidate mention browser support when discussing CSS Grid for centering elements during an interview?

    1. Because some older browsers may not support CSS Grid, and it's important to demonstrate awareness of compatibility.
    2. Because CSS Grid is deprecated and shouldn't be used in modern projects.
    3. Because Grid layouts increase page load times on all browsers.
    4. Because Flexbox cannot be used with responsive designs.
    5. Because CSS Grid automatically overrides any Flexbox settings.