Centering absolute child in relation to parent while also hiding vertical overflow but showing horizontal

Question

I have a CSS mockup I am working on but I am having trouble centering the search-bar element in relation to the phone element. Hence it is only centered when the phone element is in the middle of the screen (when the viewport is mobile) but not when it's large.

How can I center the absolute child element (search) in relation to the parent (phone)?

It should look like this regardless of where the parent element is on the screen:

EDIT: If I add the display: relative to the phone element the search-bar cuts off due to the overflow-v: hidden - for some reason overflow-h: visible isn't respected as touched on here: CSS overflow-x: visible; and overflow-y: hidden; causing scrollbar issue

.phone {
        display: block;
        height: 649px;
        width: 300px;
        overflow-y: hidden;
        background-color: #ffffff;
        border-radius: 35px;
        box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
        border:10px solid;
        border-color: #ffffff;
    }

    .glogo {
        margin: 15px auto 10px;
        width: 175px;
    }

    .search-bar {
        margin: auto;
        inset: auto 0;


        position: absolute;
        
        background-color:  #ffffff;
        height: 60px;
        width: 425px;
        box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
        border-radius: 6px;

        display: flex;
        justify-content: center;
        align-content: center;
        flex-direction: column;
    }

    .search-bar span {
        font-family: Arial, Helvetica, sans-serif;
        color:  #3c4043;
        font-size: 18px;
        margin: auto 65px auto;
    }

    .search {
        position: absolute;
        top: 0;
        bottom: 0;
        margin: auto 15px auto;
        height: 35px;
        width: 35px;
    }

    .search-result-wrapper {
        margin-top: 85px;
    }

    .search-result {
        margin: 0 auto 7px;
        padding: 22px 26px 22px 22px;
        width: 250px;
        background-color: #ffffff;
        border-radius: 8px;
        box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
    }

    .result-line {
        height: 10px;
        margin: 0 0 10px;
        border-radius: 2px;
    }

    .result-line:nth-child(1) {
        background-color: #000;
        width: 92%;
    }
    .result-line:nth-child(2) {
        background-color: #000;
        width: 75%;
    }

    .result-line:nth-child(n+3) {
        background-color: #000;
    }

    .result-line:nth-child(3) {
        width: 100%;
    }

    .result-line:nth-child(4) {
        width: 95%;
        margin: 0;
    }

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
    <div class="flex flex-wrap lg:items-center min-h-screen">
        <div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">
            
            <div class="phone">
                <img src="https://via.placeholder.com/1125x132" class="status-bar">
                <img src="https://via.placeholder.com/175x57" class="glogo">
                <div class="search-bar">
                    <img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
                </div>
                <div class="search-result-wrapper">
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                    <div class="search-result">
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                        <div class="result-line"> </div>
                    </div>
                </div>
            </div>


        </div>
        <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
            <h3 class="text-3xl">Content here</h3>
    </div>

dippas · Accepted Answer · 2022-07-16T00:34:50.070

So here is my solution to you:

add position: relative to .phone
add left: calc(-25vw + 50px); and right: calc(-25vw + 50px); (tweak as you prefer these values)
add padding-top to handle border-radius
remove inset and overflow-y: hidden
remove height from phone

Toggle Full Page in the snippet to see result in larger screen

console.clear()

.phone {
  display: block;
  width: 300px;
  background-color: #ffffff;
  box-shadow: 0px 25px 50px 0px rgba(0, 0, 0, 0.20);
  border: 10px solid;
  border-color: #ffffff;
  border-radius: 35px;
  padding-top: 10px;
  position: relative;
}

.glogo {
  margin: 15px auto 10px;
  width: 175px;
}

.search-bar {
  margin: auto;
  position: absolute;
  background-color: #ffffff;
  height: 60px;
  width: 425px;
  box-shadow: 0px 15px 50px 0px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  display: flex;
  justify-content: center;
  align-content: center;
  flex-direction: column;
  left: calc(-25vw + 50px);
  right: calc(-25vw + 50px);
}

.search-bar span {
  font-family: Arial, Helvetica, sans-serif;
  color: #3c4043;
  font-size: 18px;
  margin: auto 65px auto;
}

.search {
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto 15px auto;
  height: 35px;
  width: 35px;
}

.search-result-wrapper {
  margin-top: 85px;
}

.search-result {
  margin: 0 auto 7px;
  padding: 22px 26px 22px 22px;
  width: 250px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 1px 2px 10px 0 rgb(0 0 0 / 7%);
}

.result-line {
  height: 10px;
  margin: 0 0 10px;
  border-radius: 2px;
}

.result-line:nth-child(1) {
  background-color: #000;
  width: 92%;
}

.result-line:nth-child(2) {
  background-color: #000;
  width: 75%;
}

.result-line:nth-child(n+3) {
  background-color: #000;
}

.result-line:nth-child(3) {
  width: 100%;
}

.result-line:nth-child(4) {
  width: 95%;
  margin: 0;
}

<script src="https://cdn.tailwindcss.com"></script>
<div class="flex flex-wrap w-full justify-center content-center px-12 py-36">
  <div class="flex flex-wrap lg:items-center min-h-screen">
    <div class="flex flex-col w-full lg:w-1/2 justify-center content-center items-center">

      <div class="phone">
        <img src="https://via.placeholder.com/1125x132" class="status-bar">
        <img src="https://via.placeholder.com/175x57" class="glogo">
        <div class="search-bar">
          <img src="https://via.placeholder.com/24x24" class="search"> <span>lipsum text</span>
        </div>
        <div class="search-result-wrapper">
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
          <div class="search-result">
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
            <div class="result-line"> </div>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-wrap w-full lg:w-1/2 justify-center">
      <h3 class="text-3xl">Content here</h3>
    </div>

For this to work with my example I needed to add:.search-result-wrapper { margin-top: 85px; height: 435px; overflow-y: hidden; } — tony, Jul 16 '22 at 00:36

score -2 · Answer 2 · answered Jul 15 '22 at 23:09

-2

Please use the sample code in the justify content section of this page in order to center your child element with respect to the parent: https://getbootstrap.com/docs/4.0/utilities/flex/#justify-content

It's based on the Boostrap UI framework and allows you to use the flex feature with your div tags in order to help get the CSS arrangement that you're looking for.

I would ask that you test the sample code in a copy of your original code first before updating your initial code permanently. Once you get that CSS code to work, then you can move onto your other CSS goals.

answered Jul 15 '22 at 23:09

cstax

47
1

What are you talking about, I'm not even using Bootstap... – tony Jul 15 '22 at 23:12
@tony I didn't claim that you were. I suggested that you should use it because it was lower the amount of time needed to reach your goal. I also provided a specific example to help you solve your problem. – cstax Jul 17 '22 at 19:22
Yeah, but anything you can do with Bootstrap you can do with Tailwind or just plain CSS. Furthermore changing the whole framework on my project just to meet your recommendation doesn't make a lot of sense, does it? – tony Jul 17 '22 at 19:36
@tony Never heard of or used tailwind. Once you mentioned it, I did a page search and noticed it in your code. But not in your main description. I only noticed the raw CSS posted and then the main divs in your CSS. I missed the fact that you were using a CSS framework. And as for this quote "anything you can do with Bootstrap you can do with Tailwind or just plain CSS" ...I'm not sure I agree. – cstax Jul 17 '22 at 20:00

Centering absolute child in relation to parent while also hiding vertical overflow but showing horizontal

2 Answers2