Center element, independent of its width with CSS percentage

Question

Center element, independent of its width with CSS percentage

Navigation

#1 by (3 votes)

0

How can I position an element that is NOT a text, since for these I can user text-align: center , but for an element such as a div, its width will modify the 50% of the position, I already know how to do with javascript, but I would like to do it with CSS, how would this work? Is it possible? I would need to get the size of the div and body from CSS and do operations on it, but ... is this possible?

#elemento {
width: 500px; height: 200px; border: 2px solid purple;
position: absolute;
}

<h6 style="text-align: center;">buaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>

<div id=elemento></div>

css3

asked by Eduardo Sebastian 25.11.2017 в 15:45

source

1 answer

Updated PHP - HTML form Upload file and rename it

score 3 · Accepted Answer

One option is to contain the element within another with the properties:

  #elementoPadrre{
   display: flex;
   align-items: center;
   justify-content: center;
  }

The good thing about this option is that it centers all the children and you can also center them horizontally greetings and I hope you help my friend

#elementoPadre {
  display:flex;
  align-items: center;
  justify-content: center;
}

#elemento {
width: 500px; height: 200px; border: 2px solid purple;
}

<h6 style="text-align: center;">buaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</h6>


<div id="elementoPadre">
<div id=elemento></div>
</div>