CSS - Is it possible to center (horizontaly) an absolute element that is bigger than it's parent without using negative values?

Question

So I know there are multiple ways to center a child element. This is a purely theoretical question. I am just wondering if there are any other ways to center an element.
I created an overview of the multiple techniques for centering elements at the bottom of this post. The problem is based on the first example.

gif-reference of the question

overview of the solutions already provided:

figure {
  position: relative;
  width: 23vw;
  height: 23vw;
  overflow: hidden;
  margin: 0 auto;
}

.optie0 img {
  width: 150%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0; 
}

.optie1 img {
  position: absolute;
  width: 150%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.optie2 img {
  width: 120%;
  position: absolute;
  left: -50%;
  right: -50%;
  top: -50%;
  bottom: -50%;
  margin: auto;
}

.optie3 {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.optie3 img {
  width: 150%;
}

.optie4 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.optie5 {
  display: grid;
  grid-template-rows: 23vw;
  grid-template-columns: 23vw;
}

.optie5 img {
  width: 120%;
  justify-self: center;
  align-self: center;
}



  
    
    
    
    Static Template
    
  
  
    problem:
    
      
    
    solution1:
    
      
    
    solution2:
    
      
    
    solution3:
    
      
    
    solution4:
    
      
    
    solution5:

EDIT: Where it is possible to determine the width of the child element. As you can see in the video reference. The code of the first example works in all direction but only when you scale the child bigger as it's parent. It is not able to center horizontal.

PLEASE: IF there is a solution to the question, don't provide one of the other solution already in my example. I understand how it works. I like the first solution and it works great in all directions except for going left if the child is bigger than it's parent.

user_4998045 · Answer

using 0px wide absolute parent element and display: flex;

.parent{
width: 100px;
height:100px;
margin: auto;
border: 1px solid;
position: relative;
}
.container{
  position:absolute;
  top:10px;
  left: 50%;
  width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.content{
  border: 1px solid;
  padding:20px;
  white-space: nowrap;
  background: rgba(100,100,100,0.4);
}


  
    
      Your content of text or image.

user_533976 · Answer

Old-fashioned way wit transform -50%.


  Wrapper
  
    Centered

.a { 
  position: relative;
  height: 200px;
  width: 200px;
  border: 1px solid red;
  margin: 300px auto;
}

.b { 
  position: absolute;
  height: 300px;
  width: 300px;
  border: 1px solid blue;
  color: blue;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}

Example: https://codepen.io/vovchisko/pen/BaLBGEZ

user_3897775 · Answer

Is it possible to center (horizontally) an absolute element that is bigger than its parent without using negative values?

Yes. But you don't need to use position: absolute.

You can straightforwardly achieve this effect by adding:

display: flex
justify-content: center

to the smaller parent container.

Working Example:

body {
  display: flex;
  justify-content: center;
}

.smaller {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 180px;
  height:180px;
  background-color: rgb(213, 35, 30);
  border-radius: 50%;
  box-shadow: 0 0 12px rgb(255, 0, 0);
}

.smaller::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  display: block;
  width: 120px;
  height: 120px;
  background-color: rgb(255, 255, 255);
  border-radius: 50%;
}

.longer {
  z-index: 6;
  height: 36px;
  padding: 8px;
  color: rgb(255, 255, 255);
  line-height: 36px;
  text-align: center;
  font-size: 32px;
  font-weight: 700;
  font-family: sans-serif;
  text-transform: uppercase;
  background-color: rgb(0, 24, 163);
}


  Underground

user_14070426 · Answer

Just update the container css class with this.

You'll get the required component working efficiently.

.container {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

CSS - Is it possible to center (horizontaly) an absolute element that is bigger than it's parent without using negative values?

4 Answers