I see how to use absolute positioning to center an element below its parent, shown in the snippet example below.

But how might I "nudge" such an element so that it fits within an arbitrary ancestor container? It should be as close to centered under its parent as possbile, but it must not "leak" outside the ancestor container element. Is there a way to use absolute positioning to do this, or perhaps some other technique, without knowing the number of pixels (e.g. no left: -10px; for p1 nor right: -20px for p3)...that is, I want it to work no matter where the p1/p2/p3 elements happen to end up inside the container.

div { border: 1px solid grey; }
.container {  text-align: center; }

.p1, .p2, .p3 {
  width: 100px;
  margin-bottom: 100px;
  position: relative;
  background-color: lightgreen;
  margin-inline: auto;
}  
.p1 {
  margin-left: 10px; /* could be anything*/
}
.p2 {}
.p3 {
  margin-right: 20px; /* could be anything*/
}
.message {
  width: 200px;
  background-color: lightyellow;
  text-align: center;
  
  /* naive attempt: centered under parent */
  position: absolute;
  left: 50%;
  transform: translate(-50%, 0);
}

<div class="container">
  ancestor container
  <div class=" p1">
    p1
    <div class="message">I want this centered under p1 but nudged right to ensure it fits in container</div>
  </div>
  <div class="p2">
    p2
    <div class="message">I want this centered under p2</div>
  </div>
  <div class="p3">
    p3
    <div class="message">I want this centered under p3 but nudged left to ensure it fits in container</div>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

div { border: 1px solid grey; }
.container {  text-align: center; }

.p1, .p2, .p3 {
  width: 100px;
  margin-bottom: 100px;
  position: relative;
  background-color: lightgreen;
  margin-inline: auto;
}  
.p1 {
  margin-left: 10px;
}
.p2 {}
.p3 {
  margin-right: 20px;
}
.message {
  width: 200px;
  background-color: lightyellow;
  text-align: center;
  
  /* naive attempt: centered under parent */
  position: absolute;
  left: 50%;
}
.message.message1 {
left:0;

}

<div class="container">
  ancestor container
  <div class=" p1">
    p1
    <div class="message message1">I want this centered under p1 but nudged right to ensure it fits in container</div>
  </div>
  <div class="p2">
    p2
    <div class="message">I want this centered under p2</div>
  </div>
  <div class="p3">
    p3
    <div class="message">I want this centered under p3 but nudged left to ensure it fits in container</div>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Can you please post a jsfiddle so we can update your code?

Else try adding extra class like this:

<div class="message message1">

and then in css

.message.message1  {
  left: 0;
}