居中绝对UL的LI

Question

I'm trying to center the dots on my absolute UL. I've had a lot of trouble after trying lots of different answers around the web.

Here's the CSS (.new-dots is the UL):

.photos {
    .new-dots {
      width: 100%;
      position: absolute;
      top: 0;
      text-align: center;

      li {
        display: inline;
        color: rgba(202, 202, 202, 0.78);
        margin-right: 5px;

        button {
          background: rgba(202, 202, 202, 0.75);
          border-width: 0;
          width: 16px;
          height: 16px;
          border-radius: 8px;
          color: transparent;
        }

        button:focus {
          outline: none;
        }
      }

      .slick-active {
        button {
          background: #FFF !important;
        }
      }
    }

    .photo {
      height: 100vw;
    }
  }

Answer 1

Add this to the elemet and it will center the child element inside the parent element.

Code Example

 body { position: relative; height: 100vh; } .new-dots { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 

 <div class="new-dots">Test Content</div> 

Answer 2

• change to display: inline-block; in li from display: inline; .

• By default ul have their own padding and margin , so you need to remove that. in your case, you have to set padding-left: 0 .

• In addition, you can also remove width: 100% from the ul and set left and right to 0 so that it occupy it's parents full width.

 .photos .new-dots { position: absolute; top: 0; left: 0; right: 0; text-align: center; padding-left: 0; } .photos .new-dots li { display: inline-block; color: rgba(202, 202, 202, 0.78); margin-right: 5px; } .photos .new-dots li button { background: rgba(202, 202, 202, 0.75); border-width: 0; width: 16px; height: 16px; border-radius: 8px; color: transparent; } .photos .new-dots li button:focus { outline: none; } .photos .new-dots .slick-active button { background: #fff !important; } .photos .photo { height: 100vw; } 

 <div class="photos"> <ul class="new-dots"> <li><button>123</button></li> <li><button>456</button></li> <li><button>789</button></li> </ul> </div> 

working pen here