CSS Position Using Center Of Element To Position Element Using Percentage

Hi so I was making a website and I just realized that it when I want to position the html element, it will position the element using the right side of it. Here's an example of wha

Solution 1:

Set a width for the image and then set the left and right margins to auto.

` {width: whatever you want; margin-left: auto; margin-right: auto; }  `

Solution 2:

1. You can do it easily using text-align, when element you want to position is inside some container, i.e:

HTML:

    <div class="container">
        <div class="image">Center me!</div>
   </div>

CSS:

    .container { text-align: center }
    .image { display: inline-block }

2. Second approach: if you know the width of the element (.image). Let's say that it is 400px wide:

CSS

    .image {
        position: absolute;
        left: 50%;
        margin-left: -200px;
    }

A little bit tricky, can cause a problem when the width of the screen is lower than width of the element.