Tôi đang cố gắng tập trung nội dung các tab của mình theo chiều dọc, nhưng khi tôi thêm kiểu CSS display:inline-flex, văn bản căn chỉnh ngang sẽ biến mất.

Làm cách nào tôi có thể thực hiện cả hai sắp xếp văn bản x và y cho mỗi tab của mình?

* { 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>

• Cách tiếp cận 1 - transform translateX/ translateY:

  Ví dụ ở đây / Ví dụ toàn màn hình

  Trong các trình duyệt được hỗ trợ (hầu hết trong số chúng), bạn có thể sử dụng top: 50%/ left: 50%kết hợp với translateX(-50%) translateY(-50%)để định tâm động theo chiều dọc / chiều ngang của phần tử.

.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>

• Cách tiếp cận 2 - Phương pháp Flexbox:

  Ví dụ ở đây / Ví dụ toàn màn hình

  Trong các trình duyệt được hỗ trợ , đặt displayphần tử được nhắm mục tiêu thành flexvà sử dụng align-items: centercho định tâm dọc và justify-content: centercho định tâm ngang. Chỉ cần đừng quên thêm tiền tố của nhà cung cấp để được hỗ trợ thêm cho trình duyệt ( xem ví dụ ).

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>

• Cách tiếp cận 3 - table-cell/ vertical-align: middle:

  Ví dụ ở đây / Ví dụ toàn màn hình

  Trong một số trường hợp, bạn sẽ cần đảm bảo rằng chiều cao của phần tử html/ bodyđược đặt thành 100%.

  Cho sự liên kết dọc, thiết lập các yếu tố phụ huynh của width/ heightđể 100%và thêm display: table. Sau đó, cho phần tử con, thay đổi displaythành table-cellvà thêm vertical-align: middle.

  Đối với định tâm ngang, bạn có thể thêm text-align: centervào giữa văn bản và bất kỳ inlinephần tử con nào khác . Ngoài ra, bạn có thể sử dụng margin: 0 auto, giả sử phần tử là blockmức.

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>

• Cách tiếp cận 4 - Vị trí hoàn toàn 50%từ trên xuống với sự dịch chuyển:

  Ví dụ ở đây / Ví dụ toàn màn hình

  Cách tiếp cận này giả định rằng văn bản có chiều cao đã biết - trong trường hợp này , 18px. Chỉ cần định vị hoàn toàn phần tử 50%từ trên xuống, liên quan đến phần tử cha. Sử dụng margin-topgiá trị âm bằng một nửa chiều cao đã biết của phần tử, trong trường hợp này - -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>

• Cách tiếp cận 5 - line-heightPhương pháp (Ít linh hoạt nhất - không được đề xuất):

  Ví dụ ở đây

  Trong một số trường hợp, phần tử cha sẽ có chiều cao cố định. Đối với định tâm dọc, tất cả những gì bạn phải làm là đặt một line-heightgiá trị trên phần tử con bằng với chiều cao cố định của phần tử cha.

  Mặc dù giải pháp này sẽ hoạt động trong một số trường hợp, đáng chú ý là nó sẽ không hoạt động khi có nhiều dòng văn bản - như thế này .

.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>

Nếu CSS3 là một tùy chọn (hoặc bạn có dự phòng), bạn có thể sử dụng biến đổi:

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

Không giống như cách tiếp cận đầu tiên ở trên, bạn không muốn sử dụng bên trái: 50% với bản dịch phủ định vì có lỗi tràn trong IE9 +. Sử dụng một giá trị đúng dương và bạn sẽ không thấy thanh cuộn ngang.

Cách tốt nhất để căn giữa một hộp theo chiều dọc và chiều ngang, là sử dụng hai thùng chứa:

Các container bên ngoài:

• nên có display: table;

Các thùng chứa bên trong:

• nên có display: table-cell;
• nên có vertical-align: middle;
• nên có text-align: center;

Hộp nội dung:

• nên có display: inline-block;
• nên điều chỉnh căn chỉnh văn bản ngang, trừ khi bạn muốn văn bản được căn giữa

Bản giới thiệu :

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>

Xem thêm Fiddle này !

Định tâm ở giữa trang:

Để căn giữa nội dung của bạn ở giữa trang của bạn, hãy thêm phần sau vào thùng chứa bên ngoài của bạn:

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

Đây là bản demo cho điều đó:

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>

Xem thêm Fiddle này !

Dưới đây là cách sử dụng 2 thuộc tính flex đơn giản để căn giữa n div trên trục 2:

• Đặt chiều cao của thùng chứa của bạn: Ở đây, thân máy được đặt ở mức tối thiểu 100vh.
• align-items: center sẽ theo chiều dọc các khối
• justify-content: space-around sẽ phân phối không gian ngang miễn phí xung quanh các div

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

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

Chạy đoạn mã này và xem một div được sắp xếp theo chiều dọc và chiều ngang.

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>

Giải pháp đơn giản và gọn gàng nhất đối với tôi là sử dụng "biến đổi" thuộc tính 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>

Con đầu tiên sẽ được sắp xếp theo chiều dọc và chiều ngang ở trung tâm

để căn giữa Div trong một trang 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>

Cập nhật Tùy chọn khác là sử dụng hộp flex 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>

Dưới đây là cách tiếp cận hộp Flex để có kết quả mong muốn

<!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>

Một cách tiếp cận khác là sử dụng bảng:

<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>

Để định tâm theo chiều dọc và chiều ngang một phần tử, chúng ta cũng có thể sử dụng các thuộc tính được đề cập bên dưới.

Thuộc tính CSS này sắp xếp các mục theo chiều dọc và chấp nhận các giá trị sau:

flex-start : Các vật phẩm thẳng hàng với đỉnh của container.

đầu cuối : Các mặt hàng thẳng hàng với đáy của container.

trung tâm : Vật phẩm thẳng hàng ở tâm dọc của container.

đường cơ sở : Các mục hiển thị tại đường cơ sở của container.

căng ra : Các mặt hàng được kéo dài để phù hợp với container.

Thuộc tính CSS này chứng minh nội dung , căn chỉnh các mục theo chiều ngang và chấp nhận các giá trị sau:

bắt đầu uốn : Vật phẩm thẳng hàng với bên trái của container.

đầu cuối : Vật phẩm thẳng hàng với bên phải của container.

trung tâm : Vật phẩm thẳng hàng ở giữa container.

không gian giữa : Các mục hiển thị với khoảng cách bằng nhau giữa chúng.

không gian xung quanh : Các mục hiển thị với khoảng cách bằng nhau xung quanh chúng.

Cách tiếp cận lưới 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>

Cần phải làm theo giải pháp mới và dễ dàng:

  .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>

• Cách tiếp cận 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;
    }

Chỉ cần làm trên cùng, dưới cùng, trái và phải thành 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>

Bạn có thể đạt được điều này bằng cách sử dụng CSS (phần tử display:inline-grid+ grid-auto-flow: row;) Grid và Flex Box (phần tử chadisplay:flex; ),

Xem đoạn trích dưới đây

#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>

Liên kết nguồn

Phương pháp 1) Kiểu hiển thị flex

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

Phương pháp 2) Chuyển đổi 2D

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

Xem các phương pháp khác tại đây

Cách dễ nhất để căn giữa một div theo cả chiều dọc và chiều ngang như sau:

<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>

Thêm một ví dụ :

.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>

Đây là một vấn đề liên quan mà mọi người có thể đến trang này khi tìm kiếm: Khi tôi muốn căn giữa một div cho "hình vuông 100px" đang chờ .. "tôi sử dụng gif hoạt hình:

  .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*/
    }

Nếu bạn thích nó mà không có :
flexbox / lưới / bảng
hoặc không có :
vertical-align: middle

Bạn có thể làm:

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;
}

Điều này sẽ làm việc

.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>

Đơn giản ! Sử dụng flex hiển thị trên container và lề tự động trên văn bản !!!!

#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>

Bản trình diễn: https://jsfiddle.net/ay95f08g/

Đã thử nghiệm: Safari, Chrome, Firefox và Opera trên MacOs Mojave. (tất cả cập nhật mới nhất vào ngày 25 tháng 2 năm 2019)

Có nhiều việc phải làm như vậy. bạn có thể sử dụng phương pháp sau để tạo div ở giữa trang.

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

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

chúc mừng

Cách flexboxtiếp cận đơn giản nhất :

Cách dễ nhất để căn giữa một phần tử theo chiều dọc và chiều ngang là biến nó thành một mục linh hoạt và đặt lề của nó thành auto:

Nếu bạn áp dụng lề tự động cho một mục flex, mục đó sẽ tự động mở rộng lề được chỉ định của nó để chiếm thêm không gian trong thùng chứa flex ...

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

.flex-item {
  margin: auto;
}

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

Phần mở rộng lề này theo mỗi hướng sẽ đẩy phần tử chính xác đến giữa thùng chứa của nó.