Saya mencoba memusatkan konten tab saya secara vertikal, tetapi ketika saya menambahkan gaya CSS display:inline-flex, perataan teks horizontal menghilang.

Bagaimana saya bisa membuat kedua penyelarasan teks x dan y untuk masing-masing tab saya?

* { box-sizing: border-box; }
#leftFrame {
  background-color: green;
  position: absolute;
  left: 0;
  right: 60%;
  top: 0;
  bottom: 0;
}
#leftFrame #tabs {
  background-color: red;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25%;
}
#leftFrame #tabs div {
  border: 2px solid black;
  position: static;
  float: left;
  width: 50%;
  height: 100%;
  text-align: center;
  display: inline-flex;
  align-items: center;
}

<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>
  </div>
</div>

• Pendekatan 1 - transform translateX/ translateY:

  Contoh Di Sini / Contoh Layar Penuh

  Di browser yang didukung (sebagian besar dari mereka), Anda dapat menggunakan top: 50%/ left: 50%dalam kombinasi dengan translateX(-50%) translateY(-50%)untuk memusatkan elemen secara vertikal / horizontal secara dinamis.

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}

<div class="container">
    <span>I'm vertically/horizontally centered!</span>
</div>

• Pendekatan 2 - Metode Flexbox:

  Contoh Di Sini / Contoh Layar Penuh

  Di browser yang didukung , setel displayelemen yang ditargetkan ke flexdan gunakan align-items: centeruntuk pemusatan vertikal dan justify-content: centeruntuk pemusatan horizontal. Hanya saja, jangan lupa menambahkan awalan vendor untuk dukungan browser tambahan ( lihat contoh ).

html, body, .container {
    height: 100%;
}

.container {
    display: -webkit-flexbox;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    justify-content: center;
}

<div class="container"> 
  <span>I'm vertically/horizontally centered!</span>
</div>

• Pendekatan 3 - table-cell/ vertical-align: middle:

  Contoh Di Sini / Contoh Layar Penuh

  Dalam beberapa kasus, Anda perlu memastikan bahwa ketinggian html/ bodyelemen diatur ke 100%.

  Untuk penyelarasan vertikal, mengatur orangtua elemen width/ heightuntuk 100%dan menambahkan display: table. Kemudian untuk elemen anak, ubah displayto table-celldan add vertical-align: middle.

  Untuk pemusatan horizontal, Anda bisa menambahkan text-align: centerke tengah teks dan inlineelemen anak - anak lainnya . Atau, Anda bisa menggunakan margin: 0 auto, dengan asumsi elemen tersebut blocklevel.

html, body {
    height: 100%;
}
.parent {
    width: 100%;
    height: 100%;
    display: table;
    text-align: center;
}
.parent > .child {
    display: table-cell;
    vertical-align: middle;
}

<section class="parent">
    <div class="child">I'm vertically/horizontally centered!</div>
</section>

• Pendekatan 4 - Diposisikan sepenuhnya 50%dari atas dengan perpindahan:

  Contoh Di Sini / Contoh Layar Penuh

  Pendekatan ini mengasumsikan bahwa teks memiliki ketinggian yang diketahui - dalam contoh ini 18px,. Posisikan saja elemen 50%dari atas, relatif terhadap elemen induk. Gunakan margin-topnilai negatif yang setengah dari tinggi elemen yang diketahui, dalam hal ini - -9px.

html, body, .container {
    height: 100%;
}

.container {
    position: relative;
    text-align: center;
}

.container > p {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    margin-top: -9px;
}

<div class="container">
    <p>I'm vertically/horizontally centered!</p>
</div>

• Pendekatan 5 - line-heightMetode (Paling tidak fleksibel - tidak disarankan):

  Contoh Di Sini

  Dalam beberapa kasus, elemen induk akan memiliki ketinggian tetap. Untuk pemusatan vertikal, yang harus Anda lakukan adalah menetapkan line-heightnilai pada elemen anak sama dengan tinggi tetap dari elemen induk.

  Meskipun solusi ini akan berfungsi dalam beberapa kasus, perlu dicatat bahwa itu tidak akan berfungsi ketika ada beberapa baris teks - seperti ini .

.parent {
    height: 200px;
    width: 400px;
    background: lightgray;
    text-align: center;
}

.parent > .child {
    line-height: 200px;
}

<div class="parent">
    <span class="child">I'm vertically/horizontally centered!</span>
</div>

Jika CSS3 adalah opsi (atau Anda memiliki fallback), Anda dapat menggunakan transform:

.center {
    right: 50%;
    bottom: 50%;
    transform: translate(50%,50%);
    position: absolute;
}

Tidak seperti pendekatan pertama di atas, Anda tidak ingin menggunakan kiri: 50% dengan terjemahan negatif karena ada bug melimpah di IE9 +. Manfaatkan nilai kanan positif dan Anda tidak akan melihat bilah gulir horizontal.

Cara terbaik untuk memusatkan kotak baik secara vertikal maupun horizontal, adalah dengan menggunakan dua wadah:

Wadah outher:

• harus punya display: table;

Wadah batin:

• harus punya display: table-cell;
• harus punya vertical-align: middle;
• harus punya text-align: center;

Kotak konten:

• harus punya display: inline-block;
• harus menyesuaikan penyelarasan teks horizontal, kecuali jika Anda ingin teks terpusat

Demo:

body {
    margin : 0;
}

.outer-container {
    display: table;
    width: 80%;
    height: 120px;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Lihat juga Fiddle ini !

Berpusat di tengah halaman:

Untuk memusatkan konten Anda di tengah halaman Anda, tambahkan berikut ini ke wadah outher Anda:

• position : absolute;
• width: 100%;
• height: 100%;

Berikut ini demo untuk itu:

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    text-align: left;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        Center this!
     </div>
   </div>
</div>

Lihat juga Fiddle ini !

Berikut adalah cara menggunakan 2 properti fleksibel sederhana untuk memusatkan n divs pada sumbu 2:

• Atur tinggi wadah Anda: Di sini tubuh diatur setidaknya 100vh.
• align-items: center akan memusatkan blok secara vertikal
• justify-content: space-around akan mendistribusikan ruang horizontal gratis di sekitar div

body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

<div>foo</div>
<div>bar</div>

Jalankan cuplikan kode ini dan lihat div yang selaras secara vertikal dan horizontal.

html,
body,
.container {
  height: 100%;
  width: 100%;
}
.container {
  display: flex;
  align-items: center;
  justify-content: center;
}
.mydiv {
  width: 80px;
}

<div class="container">
  <div class="mydiv">h & v aligned</div>
</div>

Solusi paling sederhana dan terbersih bagi saya adalah menggunakan properti "transform" CSS3:

.container {
  position: relative;
}

.container a {
  position: absolute;
  top: 50%;
  transform: translate(0,-50%);
}

<div class="container">
  <a href="#">Hello world!</a>
</div>

    .align {
        display: flex;
        width: 400px;
        height: 400px;
        border: solid 1px black;
        align-items: center;
        justify-content: space-around;
    }
    .align div:first-child {
        width: 20px;
        height: 20px;
        background-color: red;
        position: absolute; 
    }
    .align div {
        width: 20px;
        height: 20px;
        background-color: blue;
    }

    <div class='align'>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

Anak pertama akan disejajarkan secara vertikal dan horizontal di tengah

untuk memusatkan Div di halaman check the fiddle link

#vh {
    border-radius: 15px;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    padding: 25px;
    width: 200px;
    height: 200px;
    background: white;
    text-align: center;
    margin: auto;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}

<div id="vh">Div to be aligned vertically</div>

Perbarui Opsi lain adalah dengan menggunakan kotak fleksibel check the fiddle link

.vh {
    background-color: #ddd;
    height: 200px;
    align-items: center;
    display: flex;
}
.vh > div {
    width: 100%;
    text-align: center;
    vertical-align: middle;
}

<div class="vh">
    <div>Div to be aligned vertically</div>
</div>

Di bawah ini adalah pendekatan Flex-box untuk mendapatkan hasil yang diinginkan

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Flex-box approach</title>
<style>
  .tabs{
    display: -webkit-flex;
    display: flex;
    width: 500px;
    height: 250px;
    background-color: grey;
    margin: 0 auto;
    
  }
  .f{
    width: 200px;
    height: 200px;
    margin: 20px;
    background-color: yellow;
    margin: 0 auto;
    display: inline; /*for vertically aligning */
    top: 9%;         /*for vertically aligning */
    position: relative; /*for vertically aligning */
  }
</style>
</head>
<body>

    <div class="tabs">
        <div class="f">first</div>
        <div class="f">second</div>        
    </div>

</body>
</html>

Pendekatan lain adalah dengan menggunakan tabel:

<div style="border:2px solid #8AC007; height:200px; width:200px;">
  <table style="width:100%; height:100%">
    <tr style="height:100%">
      <td style="height:100%; text-align:center">hello, multiple lines here, this is super long, and that is awesome, dude</td>
    </tr>
  </table>
</div>

Untuk memusatkan elemen secara vertikal dan horizontal, kami juga dapat menggunakan properti yang disebutkan di bawah ini.

Properti CSS ini menyejajarkan-item secara vertikal dan menerima nilai-nilai berikut:

flex-start : Item sejajar dengan bagian atas wadah.

flex-end : Item sejajar dengan bagian bawah wadah.

center : Item sejajar di tengah vertikal wadah.

garis dasar : Item ditampilkan di garis dasar wadah.

meregang : Barang diregangkan agar sesuai dengan wadah.

Properti CSS ini membenarkan-konten , yang meluruskan item secara horizontal dan menerima nilai-nilai berikut:

flex-start : Item sejajar dengan sisi kiri wadah.

flex-end : Item sejajar dengan sisi kanan wadah.

center : Item sejajar di tengah wadah.

space-between : Item ditampilkan dengan jarak yang sama di antara mereka.

space-around : Item ditampilkan dengan jarak yang sama di sekitarnya.

Pendekatan grid css

#wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, 1fr);
}
.main {
    background-color: #444;
}

<div id="wrapper">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box main"></div>
</div>

Perlu mengikuti solusi baru dan mudah:

  .centered-class {
      align-items: center;
      display: flex;
      justify-content: center;
      width: 100vw;
      height: 100vh;
    }

<div class="centered-class">
  I'm in center vertically and horizontally.
</div>

• Pendekatan 6

/*Change units to "%", "px" or whatever*/

#wrapper{
  width: 50%;
  height: 70vh;
  background: rgba(0,0,0,.5);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
#left{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: red;
}
#right{
  width: 50%;
  height: 50vh;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  background: green;
}
.txt{
  text-align: center;
  line-height: 50vh;
}

<div id="wrapper">
   <div id="left" class="txt">Left</div>
   <div id="right" class="txt">Right</div>
</div>

    .container{ 
               width: 50%;  //Your container width here
               height: 50%; //Your container height here
               position: absolute; 
               top: 0; 
               right: 0;  
               bottom: 0; 
               left: 0; 
               margin: auto;
    }

Buat saja bagian atas, bawah, kiri dan kanan ke 0.

<html>
<head>
<style>
<div> 
{
position: absolute;
margin: auto;
background-color: lightblue;
width: 100px;
height :100px;
padding: 25px;
top :0;
right :0;
bottom:0;
left:0;
}


</style>
</head>
<body>

<div> I am in the middle</div>

</body>
</html>

Anda dapat mencapai ini menggunakan CSS (elemen Anda display:inline-grid+ grid-auto-flow: row;) Kotak dan Kotak Fleksibel (elemen indukdisplay:flex; ),

Lihat cuplikan di bawah ini

#leftFrame {
  display: flex;
  height: 100vh;
  width: 100%;
}

#tabs {
  display: inline-grid;
  grid-auto-flow: row;
  grid-gap: 24px;
  justify-items: center;
  margin: auto;
}

html,body {
  margin:0;
  padding:0;
}

<div>
<div id=leftFrame>
  <div id=tabs>
    <div>first</div>
    <div>second</div>        
  </div>
</div>
</div>

Tautan Sumber

Metode 1) Jenis tampilan flex

.child-element{
     display: flex;
     justify-content: center;
     align-items: center;
}

Metode 2) Transform 2D

.child-element {
   top: 50%;
   left: 50%;
   transform: translate(-50% , -50%);
   position: absolute;
}

Lihat metode lain di sini

Cara termudah untuk memusatkan div baik secara vertikal maupun horizontal adalah sebagai berikut:

<div style="display: table; width: 200px; height: 200px; border: 1px solid black;">
    <div style="display: table-cell; vertical-align: middle; text-align: center;">
        Text Here
    </div>
</div>

Satu Lagi Contoh :

.parent {
    display: table; 
    width: 100%; 
    height: 100%;
}

.child {
    display: table-cell; 
    vertical-align: middle;
    text-align: center;
}


<div class="parent">
    <div class="child">
        <h4><u>SERVICE IN BANGLADESH FLEET RESERVE <br> AND <br> RE-ENGAGEMENT ORDER FOR DEFENCE SERVICE</u></h4>
    </div>
</div>

Ini adalah masalah terkait yang mungkin orang datang ke halaman ini ketika mencari: Ketika saya ingin memusatkan div untuk "menunggu .." animasi gif (100px persegi) yang saya gunakan:

  .centreDiv {
        position: absolute;
        top: calc(50vh - 50px);
        top: -moz-calc(50vh - 50px);
        top: -webkit-calc(50vh - 50px);
        left: calc(50vw - 50px);
        left: -moz-calc(50vw - 50px);
        left: -webkit-calc(50vw - 50px);
        z-index: 1000; /*whatever is required*/
    }

Jika Anda lebih suka tanpa :
flexbox / grid / table
atau tanpa :
vertical-align: middle

Anda dapat melakukan:

HTML

<div class="box">
  <h2 class="box_label">square</h2>
</div>

CSS

.box {
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  text-align: center;
  border: 1px solid black;
}

.box_label {
  box-sizing: border-box;
  display: inline-block;
  transform: translateY(50%);
  text-align: center;
  border: 1px solid black;
}

Ini seharusnya bekerja

.center-div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 100vh;
}

<div class="center-div">Center Div</div>

Sederhana! Gunakan tampilan flex pada wadah dan margin otomatis pada teks !!!!

#hood{

 width : 300px;
 height: 100px;
 border: solid 1px #333333;
 display: flex; 
}

#hood span{

  margin: auto
}



<html>
<head></head>
    <body>
        <div id="hood">
            <span> I Am Centered</span>
        </div>
    </body>
</html>

Demo: https://jsfiddle.net/ay95f08g/

Diuji: Safari, Chrome, Firefox dan Opera di MacOs Mojave. (semua pembaruan terakhir pada 25 Februari 2019)

Ada banyak yang melakukan hal yang sama. Anda dapat menggunakan metode berikut untuk membuat div di tengah halaman.

.center-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

<div class="center-box">
  <h1>Text in center of page</h1>
</div>

Bersulang !

flexboxPendekatan paling sederhana :

Cara termudah bagaimana memusatkan elemen tunggal secara vertikal dan horizontal adalah menjadikannya item fleksibel dan setel marginnya ke auto:

Jika Anda menerapkan margin otomatis ke item fleksibel, item itu akan secara otomatis memperpanjang margin yang ditentukan untuk menempati ruang tambahan dalam wadah fleksibel ...

.flex-container {
  height: 150px;
  display: flex;
}

.flex-item {
  margin: auto;
}

<div class="flex-container">
  <div class="flex-item">
    This should be centered!
  </div>
</div>

Perpanjangan margin ini di setiap arah akan mendorong elemen tepat ke tengah wadahnya.