How to Get The Bullet Points of a <Ul> to Center with The Text

Centering an li element without taking bullet point into account

It is not actually the space taken up by the bullet points - ul elements have a default padding-left - just reset it to zero:

Sample Image

Ideally you should just reset the padding instead of negative margins - see demo below:

#square {  position: fixed;  width: 350px;  height: 100%;  top: 0px;  left: 0px;  background-color: rgb(230, 255, 230);}
ul {  position: relative;  bottom: 30px;  display: flex;  flex-direction: column;  align-items: center;  list-style-type: none; /* hide bullet points */  padding-left: 0; /* ADDED */}
li {  margin-top: 40px;  padding-left: 75px;  border-color: white;  border-width: 2px;  border-style: solid;  padding: 5px 20px 5px 20px;  background-color: green;  border-radius: 10px;  width: 100px;  text-align: center;}
.navlink {  text-decoration: none;  color: white;}

<div id="square">  <ul>    <li><a class="navlink" href="#">Introduction</a></li>    <li><a class="navlink" href="#">Middle</a></li>    <li><a class="navlink" href="#">End</a></li>  </ul></div>

Center aligning an unordered list with bullets in Bootstrap

Change your code into this

HTML:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<ul>
  <li>This</li>
  <li>is</li>
  <li>my</li>
  <li>list</li>
</ul>

CSS:

ul {
  display: table;
  margin: 0 auto;
}

Display table will care about the box size based on inside value and margin auto will centralized the section.

How to center an unordered list?

ul {  display: table;  margin: 0 auto;}

<html>
<body>  <ul>    <li>56456456</li>    <li>4564564564564649999999999999999999999999999996</li>    <li>45645</li>  </ul></body>
</html>

Centering Bullets On A Centered List

You asked the same question at Centering <UL> + Keeping <LI>'s Aligned and i already answered you.

Give your div a class name center. Assuming your div width is 200px, margin:0 auto will center and text-align:left will align the text to the left while maintaining its centering due to margin auto.

.center{
    width:200px;
    margin:0 auto;
    text-align:left;
}

Check working example at http://jsfiddle.net/8mHeh/1/

Center my ul elements on the page without losing the bullet points

Fix it using the :before selector

.list{ text-align: center; }.list li    {        display: inline;        margin-right: 1em;    }    .list li:before {        content: '\2022';        margin-right: 0.5em;        color: red;    }

 <ul class="list">  <li><a href="X site" target="_blank" rel="noopener">Sitemap</a></li>  <li>© <?php echo date('Y'); ?> | All rights reserved</li> </ul>