You could remove the justify-content center and add margin to center horizontally.

Because the width is only 60%, the text can be centered inside of the div, but the div containing the text (your tab card) is only 60% of its container (tabcontent). If you don’t specify otherwise, the tab card will be put at the beginning (left most) of tabcontent and only take up that 60% width. By saying margin 0 auto you’re saying you want 0 margin in the top and bottom, and on the left and right equal margin to center the div within it’s container.

See this css:

.tabcontent {
     padding: 6px 12px;
     border-top: none;
}
.tab-card {  
     text-align: center;
     margin: 0 auto;
     margin-top: 80px;
     width: 60%;
}

If you would like to use justify-content, you would need to justify the contents of the container to center. Additionally that container would need to have the display of flex. See below.

.tabcontent {
    display: flex;
    padding: 6px 12px;
    border-top: none;
    justify-content: center;
}

.tab-card{  
    text-align: center;
    margin-top: 80px;
    width: 60%;
}

.tab-card {
    text-align: center;
    justify-content: center;
    margin: 80px auto;
    width: 60%;
}

I have a div that contains some text. I have it aligned centrally but when I reduce the width to 60% it goes to the left of the screen. How can I have my text aligned centre horizontally with its width reduced to 60%?

.tabcontent {
  padding: 6px 12px;
  border-top: none;
}

.tab-card{  
  text-align: center;
  justify-content: center;
  margin-top: 80px;
  width: 60%;
}

<div class="tabcontent">
  <div class="tab-card">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
  </div>
</div>