Question: I have been using the following and trying to grab the bullet points with:

```css
#list {
  text-align: center;
}
```

```html
<div id="list">
  <ul>
    <li>listitem1</li>
    <li>listitem2</li>
  </ul>
</div>
```

and trying a handful of other techniques like trying to reduce padding/margin, but can't seem to find the answer.

Answer: 
```
ul {
    text-align: center;
    list-style-position: inside;
}

```
WARNING: ONLY WORKS FOR UNORDERED LISTS (`<ul>`) NOT ORDERED LISTS (`<ol>`).

I came across this issue as well, so I started thinking outside of the box.

Basically, my solution was to create my own `<div>` tags the will replace the list item styles. Each `<li>` tag contains both a bullet point design (the `<div class="custom-bullet">`) and some text (the `<p>`). this way I can easily move things around using `flex` and other CSS properties.

The following code **vertically aligns both the custom bullets and paragraph text** using flex.

HTML w/ CSS

```
<ul>
    <li>
        <div class="custom-bullet"></div>
        <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum, dolore.
            Fugit labore aperiam ad, aliquid perferendis ullam quos doloribus nam
            nesciunt quae laborum quod iste recusandae accusamus tempora numquam!
            Nihil?
        </p>
    </li>
    <li>
        <div class="custom-bullet"></div>
        <p>
            Lorem ipsum dolor, sit amet consectetur adipisicing elit. Pariatur,
            officia recusandae. Reiciendis, eos. Rem perspiciatis eius sapiente ipsa
            dolor in architecto sit sint, neque tempora, magni consequuntur ut.
            Quaerat, provident.
        </p>
    </li>
</ul>

<style>
    ul {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    li {
        list-style: none;
        display: flex;
        flex-direction: row;
    align-items: center;
    }

    li p {
        margin-left: 2rem;
    }

    .custom-bullet {
        position: absolute;
        width: 1rem;
        height: 1rem;
        background-color: gray;
        border-radius: 20px;
        margin: 0;
        padding: 0;
    }
</style>

```