Div cannot be center aligned-CodePudding

Problem

When I try to use the code (see below), the div is only centered when I use width: 100px;.

<div style="border: solid 1px black; width: 100px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">

Screenshot from the website

Since I want to assign a much longer width to the text and set the width to 500px, the div is no longer centered.

<div style="border: solid 1px black; width: 500px; height: 100px; background-color: blue; margin-left: auto; margin-right: auto;">

Problem Nr. 2

The svg isn't centered

<div class="col-xl-3 col-lg-3 col-sm-6">
    <div class="ud-single-feature wow fadeInUp" data-wow-delay=".25s" >
        <div class="ud-feature-icon" >
            <i class="lni lni-layers"></i>
        </div>
        <div class="ud-feature-content" style="position:absolute; width: 100%; text-align: center;">

            <h3 class="ud-feature-title" style="text-align: center;">test</h3>
            <p class="ud-feature-desc" style="text-align: center;">
                test
            </p>
            <!--                        <a href="javascript:void(0)" >
                                        Learn More
                                    </a>-->
        </div>
    </div>
</div>

CodePudding user response：

Although your question does not define your desired goal, using margin-left or right will not justify the centre point of the page. Instead, consider using position: fixed in order to centre exactly in the page.

This should also mean you can set the dimensions of the div as you like.

<div style="background: blue; width: 100px; height: 100px; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%)">Div should be properly centred in page.</div>

CodePudding user response：

You can set the div as a child of another div like so :

<div style="justify-content: center; align-items: center; display: flex;">
  <div style="border: 1px solid black; width: 500px; height: 100px; background-color: blue;">

  </div>
</div>

CodePudding user response：

check my 1st pic

in my pc it's in center. i just copy your code and run it in brower. check my screen shoot. what u want verticl center or horizontal center?

if u want like my 2nd pic check my 2nd pic use this code

  
 <div style="display: grid; height: 300px; border: solid 5px black;"> 

  <div style="border: solid 1px black; width: 500px; height: 100px; background-color: blue; margin: auto; text-align: center;"> 
  <p>Tour Text</p>
  
  </div>
</div>