درود. برای وسط‌چین کردن راه‌های مختلفی وجود داره، می‌تونید margin: 140px که به کلاس header-title دادید رو به margin: 140px auto; تغییر بدید میاد وسط.

متوجه نشدم اگه ممکنه واضح ترتوضیحش بدید

این بخش رو به این صورت تغییر بدید:

.header-title {
  color: white;
  margin: 140px auto;
  max-width: 500px;
}

سلام این کارو کردم درست نشد 

اینطور که من متوجه شدم همچین چیزی می‌خواید (بخشی که دورش خط کشیدم وسط قرار گرفته الان):

درسته؟

اگر بله کد اصلاح شده رو براتون می‌ذارم:
CSS:

@font-face {
  font-family: vazir;
  src: url("../font/Vazir-Medium.eot") format("eot"),
    url("../font/Vazir-Medium.woff") format("woff"),
    url("../font/Vazir-Medium.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: vazir;
}
a {
  text-decoration: none;
}
ul,
ol {
  list-style: none;
}
ul,
ol,
li {
  margin: 0;
  padding: 0;
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.red-color {
  background-color: red;
}
.blue-color {
  background-color: rgba(0, 0, 255, 0.639);
}
.green-color {
  background-color: green;
}
.yellow-color {
  background-color: yellow;
}
.gray-color {
  background-color: #eee;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.p-0 {
  padding: 0;
}
.mb-20 {
  margin-bottom: 20px;
}
.mt-20 {
  margin-top: 20px;
}
.img-responsive {
  width: 100%;
  height: auto;
}
.round-corner {
  border-radius: 5px;
}
.box-shadow {
  box-shadow: 0px 0px 2px 0px #000;
}
/* start contact section styles */
.container-fluid-custom {
  background-color: rgb(20, 20, 96);
  color: white;
}
.container-fluid-custom .contact {
  font-size: 15px;
  height: 40px;
}
.container-fluid-custom .contact i {
  color: orange;
  margin-right: 15px;
  vertical-align: -10px;
}
.container-fluid-custom .contact span {
  color: white;
  margin-left: 5px;
  vertical-align: 1px2;
}
.container-fluid-custom .social-media {
  direction: ltr;
}
.container-fluid-custom .social-media i {
  vertical-align: -10px;
  margin-left: 6px;
}
.container-fluid-custom .social-media a {
  color: white;
}
.container-fluid-custom .social-media i:hover {
  background-color: orange;
  padding: 10px;
}
/* start navbar section styles */
.active {
  border-bottom: 2px solid red;
}
.nav {
  background-color: #fff;
  overflow: hidden;
  box-shadow: 1px 1px 1px #efefef;
  position: sticky;
  top: 0;
}
.nav a {
  float: right;
  color: #1f1f1fee;
  text-align: center;
  padding: 14px 16px;
  font-size: 16px;
}
.nav a:hover {
  border-bottom: 2px solid red;
}
.icon {
  display: none;
}
@media screen and (max-width: 600px) {
  .nav a:not(:first-child) {
    display: none;
  }
  .nav a.icon {
    display: block;
    float: left;
  }
  .nav.responsive {
    position: relative;
  }
  .nav a.icon {
    position: absolute;
    top: 0;
    left: 0;
  }
  .nav.responsive a {
    float: none;
    display: block;
    text-align: right;
  }
}
/* start navbar section styles */
.container {
  clear: both;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 15px;
}
.contaner-fluid {
  width: 100%;
}
.row::after {
  content: "";
  clear: both;
  display: table;
}
[class^="col-"] {
  float: right;
  padding-left: 15px;
  padding-right: 15px;
}
/* start header section styles */
div.row div.red {
  padding: 0;
}
.img-header {
  min-height: 90vh;
}
div.overlay {
  width: 100%;
  min-height: 90vh;
  background-color: rgba(0, 0, 0, 0.4);
}
.header-title {
  color: white;
  text-align: center;
  margin: 140px auto;
  max-width: 500px;
}
.header-title a {
  background-color: orange;
  padding: 5px 10px;
  border-radius: 3px;
  color: white;
}
@media screen and (max-width: 980px) {
  figure {
    position: relative;
  }
  .header-title {
    width: 100%;
    margin: 0;
    background-color: rgba(225, 225, 225, 0.5);
    color: #000;
    border-radius: 5px;
    padding-bottom: 40px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  .overlay,
  .img-header {
    min-height: 0;
  }
}
@media screen and (max-width: 600px) {
  .header-title h1 {
    font-size: 20px;
  }
  .header-title h3 {
    font-size: 16px;
  }
}
/* end header section styles */
@media only screen and (max-width: 576px) {
  .xs-hidden {
    display: none;
  }
  .col-xs-1 {
    width: 8.33%;
  }
  .col-xs-2 {
    width: 16.66%;
  }
  .col-xs-3 {
    width: 25%;
  }
  .col-xs-4 {
    width: 33.33%;
  }
  .col-xs-5 {
    width: 41.66%;
  }
  .col-xs-6 {
    width: 50%;
  }
  .col-xs-7 {
    width: 58.33%;
  }
  .col-xs-8 {
    width: 66.666%;
  }
  .col-xs-9 {
    width: 75%;
  }
  .col-xs-10 {
    width: 83.33%;
  }
  .col-xs-11 {
    width: 91.66%;
  }
  .col-xs-12 {
    width: 100%;
  }
  .col-xs-offset-0 {
    margin-right: 0;
  }
  .col-xs-offset-1 {
    margin-right: 8.33%;
  }
  .col-xs-offset-2 {
    margin-right: 16.66%;
  }
  .col-xs-offset-3 {
    margin-right: 25%;
  }
  .col-xs-offset-4 {
    margin-right: 33.33%;
  }
  .col-xs-offset-5 {
    margin-right: 41.66%;
  }
  .col-xs-offset-6 {
    margin-right: 50%;
  }
  .col-xs-offset-7 {
    margin-right: 58.33%;
  }
  .col-xs-offset-8 {
    margin-right: 66.66%;
  }
  .col-xs-offset-9 {
    margin-right: 75%;
  }
  .col-xs-offset-10 {
    margin-right: 81.33;
  }
  .col-xs-offset-11 {
    margin-right: 91.66%;
  }
  .col-xs-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 576px) {
  .col-sm-1 {
    width: 8.33%;
  }
  .col-sm-2 {
    width: 16.66%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-4 {
    width: 33.33%;
  }
  .col-sm-5 {
    width: 41.66%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-7 {
    width: 58.33%;
  }
  .col-sm-8 {
    width: 66.666%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-10 {
    width: 83.33%;
  }
  .col-sm-11 {
    width: 91.66%;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-offset-0 {
    margin-right: 0;
  }
  .col-sm-offset-1 {
    margin-right: 8.33%;
  }
  .col-sm-offset-2 {
    margin-right: 16.66%;
  }
  .col-sm-offset-3 {
    margin-right: 25%;
  }
  .col-sm-offset-4 {
    margin-right: 33.33%;
  }
  .col-sm-offset-5 {
    margin-right: 41.66%;
  }
  .col-sm-offset-6 {
    margin-right: 50%;
  }
  .col-sm-offset-7 {
    margin-right: 58.33%;
  }
  .col-sm-offset-md {
    margin-right: 66.66%;
  }
  .col-sm-offset-9 {
    margin-right: 75%;
  }
  .col-sm-offset-10 {
    margin-right: 81.33;
  }
  .col-sm-offset-11 {
    margin-right: 91.66%;
  }
  .col-sm-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 768px) {
  .col-md-1 {
    width: 8.33%;
  }
  .col-md-2 {
    width: 16.66%;
  }
  .col-md-3 {
    width: 25%;
  }
  .col-md-4 {
    width: 33.33%;
  }
  .col-md-5 {
    width: 41.66%;
  }
  .col-md-6 {
    width: 50%;
  }
  .col-md-7 {
    width: 58.33%;
  }
  .col-md-8 {
    width: 66.666%;
  }
  .col-md-9 {
    width: 75%;
  }
  .col-md-10 {
    width: 83.33%;
  }
  .col-md-11 {
    width: 91.66%;
  }
  .col-md-12 {
    width: 100%;
  }
  .col-md-offset-0 {
    margin-right: 0;
  }
  .col-md-offset-1 {
    margin-right: 8.33%;
  }
  .col-md-offset-2 {
    margin-right: 16.66%;
  }
  .col-md-offset-3 {
    margin-right: 25%;
  }
  .col-md-offset-4 {
    margin-right: 33.33%;
  }
  .col-md-offset-5 {
    margin-right: 41.66%;
  }
  .col-md-offset-6 {
    margin-right: 50%;
  }
  .col-md-offset-7 {
    margin-right: 58.33%;
  }
  .col-md-offset-8 {
    margin-right: 66.66%;
  }
  .col-md-offset-9 {
    margin-right: 75%;
  }
  .col-md-offset-10 {
    margin-right: 81.33;
  }
  .col-md-offset-11 {
    margin-right: 91.66%;
  }
  .col-md-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .col-lg-1 {
    width: 8.33%;
  }
  .col-lg-2 {
    width: 16.66%;
  }
  .col-lg-3 {
    width: 25%;
  }
  .col-lg-4 {
    width: 33.33%;
  }
  .col-lg-5 {
    width: 41.66%;
  }
  .col-lg-6 {
    width: 50%;
  }
  .col-lg-7 {
    width: 58.33%;
  }
  .col-lg-8 {
    width: 66.666%;
  }
  .col-lg-9 {
    width: 75%;
  }
  .col-lg-10 {
    width: 83.33%;
  }
  .col-lg-11 {
    width: 91.66%;
  }
  .col-lg-12 {
    width: 100%;
  }
  .col-lg-offset-0 {
    margin-right: 0;
  }
  .col-lg-offset-1 {
    margin-right: 8.33%;
  }
  .col-lg-offset-2 {
    margin-right: 16.66%;
  }
  .col-lg-offset-3 {
    margin-right: 25%;
  }
  .col-lg-offset-4 {
    margin-right: 33.33%;
  }
  .col-lg-offset-5 {
    margin-right: 41.66%;
  }
  .col-lg-offset-6 {
    margin-right: 50%;
  }
  .col-lg-offset-7 {
    margin-right: 58.33%;
  }
  .col-lg-offset-8 {
    margin-right: 66.66%;
  }
  .col-lg-offset-9 {
    margin-right: 75%;
  }
  .col-lg-offset-10 {
    margin-right: 81.3xl;
  }
  .col-lg-offset-11 {
    margin-right: 91.66%;
  }
  .col-lg-offset-12 {
    margin-right: 100%;
  }
}
@media only screen and (min-width: 1200px) {
  .col-xl-1 {
    width: 8.33%;
  }
  .col-xl-2 {
    width: 16.66%;
  }
  .col-xl-3 {
    width: 25%;
  }
  .col-xl-4 {
    width: 33.33%;
  }
  .col-xl-5 {
    width: 41.66%;
  }
  .col-xl-6 {
    width: 50%;
  }
  .col-xl-7 {
    width: 58.33%;
  }
  .col-xl-8 {
    width: 66.666%;
  }
  .col-xl-xl {
    width: 75%;
  }
  .col-xl-10 {
    width: 83.33%;
  }
  .col-xl-11 {
    width: 91.66%;
  }
  .col-xl-12 {
    width: 100%;
  }
  .col-xl-offset-0 {
    margin-right: 0;
  }
  .col-xl-offset-1 {
    margin-right: 8.33%;
  }
  .col-xl-offset-2 {
    margin-right: 16.66%;
  }
  .col-xl-offset-3 {
    margin-right: 25%;
  }
  .col-xl-offset-4 {
    margin-right: 33.33%;
  }
  .col-xl-offset-5 {
    margin-right: 41.66%;
  }
  .col-xl-offset-6 {
    margin-right: 50%;
  }
  .col-xl-offset-7 {
    margin-right: 58.33%;
  }
  .col-xl-offset-8 {
    margin-right: 66.66%;
  }
  .col-xl-offset-9 {
    margin-right: 75%;
  }
  .col-xl-offset-10 {
    margin-right: 81.33;
  }
  .col-xl-offset-11 {
    margin-right: 91.66%;
  }
  .col-xl-offset-12 {
    margin-right: 100%;
  }
}

خانم پاشائی شما عکس روهم باید داشته باشی (headerسایت)بعد در مدیاکوئری که تعریف کردم (max_width:980px) که میاد helder _title در وسط قرار نمیگیر

مبتکر آموزش نوین باید دقیقا وسط عکس header باشه یعنی بالاتر

خانم پاشائی شما عکس روهم باید داشته باشی (headerسایت)بعد در مدیاکوئری که تعریف کردم (max_width:980px) که میاد helder _title در وسط قرار نمیگیر

مبتکر آموزش نوین باید دقیقا وسط عکس header باشه یعنی بالاتر

کدی که شما قرار دادید تصویر نداره، لطفا عکستون رو در سایتی مثل پیکوفایل آپلود کنید و قرار بدید در سورس کد و لینک کد اصلاح شده رو بگذارید.

https://codepen.io/hieujzmo-the-encoder/pen/GgKqqGY

چیزی که خواستید 

سلام. مجدد، 

همچین خروجی مد نظرتونه:

الان header-title از لحاظ عمودی وسط هدرتون قرار گرفته.
این بخش از کد رو به این صورت تغییر بدید:

div.overlay {
  width: 100%;
  min-height: 90vh;
  background-color: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  padding: 0 20px;
}
.header-title {
  color: white;
  max-width: 500px;
}

display: flex برای div.overlay: این ویژگی باعث می‌شه که محتویات داخل این المان به صورت منعطف رفتار کنن.

justify-content: center و align-items: center: این دو ویژگی المان‌های فرزند رو در مرکز عمودی و افقی قرار می‌دن. که اینجا ما فقط عمودی مد نظرمون بود.

در مدیاکوئری‌های پایین‌تر هم خودتون تنظیم کردید که المان header-title از لحاظ عمودی و افقی در مرکز صفحه قرار بگیره.

ولی اصلا این چیز هایی که استفاده کزدید رو نمی‌فهمم واستاد هم ازاونا استفاده نکرده 

اگه ممکنه هرچیز جدیدی که استفاده کردید رو توضیح واضح‌تری بدید 

ببینید الان دیگه با float و margin و... قالب طراحی نمی‌کنن به خاطر پیچیدگی‌هایی که داره. از فلکس باکس و سیستم گرید استفاده می‌شه که کار رو بسیار راحت می‌کنه و انعطاف بیشتری دارن و در ادامه یاد می‌گیرید.

به‌طور خلاصه:

فلکس‌باکس تو CSS یه مدل چیدمانه که کمک می‌کنه المان‌ها رو توی یه خط (افقی یا عمودی) راحت و منعطف بچینین. مثلاً وقتی بخواین فاصله‌ها، ترازبندی یا ترتیب المان‌ها توی یه لیست یا کانتینر رو دقیق‌تر مدیریت کنین، فلکس‌باکس می‌تونه کمکتون کنه. کار رو برای طراحی‌های ریسپانسیو آسون‌تر می‌کنه.

اگر بخوایم از فلکس استفاده کنیم باید display رو flex در نظر بگیریم.

2 پراپرتی که اکثرا همراه فلکس باکس هستن:

justify-content: واسه چیدن المان‌ها تو جهت اصلی (معمولاً افقی) استفاده می‌شه. مثلاً بگین المان‌ها وسط باشن، از راست بچسبن، یا با فاصله مساوی پخش بشن.

align-items: اینم واسه چیدن المان‌ها تو جهت عمودی (محور عمود بر جهت اصلی) به کار میاد. مثلاً بگین همه از بالا تراز بشن، وسط وایستن یا کشیده بشن به ارتفاع کانتینر.

اینجا align-items رو center در نظر گرفتیم که از لحاظ افقی بیاد وسط المانتون.

ممنون می‌شم اگر پاسخ سوالتون رو گرفتید تیک "بله" / ✔ رو بزنید تا وضعیت تاپیک مشخص بشه.

با این چیز هایی هم کفتید اصلا تغییری نکرد بازم فک کنم منظرم 

با این چیز هایی که گفتید اصلا تغییری نکرد بازم من اشتباهی منظور رو به عرضتون رسوندم ببینید عکس اولی چیزیه که هست و عکس دومی چیزیه که باید باشه 

یعنی چی ؟

یعنی چی ؟

یعنی header_title باید دقیقا وسط عکس header باشه یا همون تگ figure که position:relative گرفته و در واقع header- titlt نسبت به figure که والدش هست باید وسط بیاد 

خب من چند روزه درگیر این مشکلم واسه همینه نتونستم از دوره چیزی رو پیش ببرم اگه ممکنه زودتر جواب این سوال رو بدید چون هیچ چیز دیگه ای به ذهن من نمیرسه