293

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ác phương thức CSS mới nhất sử dụng biến đổi kiểu hiển thị và biến đổi CSS 2D không có trung tâm chiều rộng và chiều cao chia theo chiều ngang và theo chiều dọc chỉ sử dụng các phương thức CSS freakyjolly.com/

    – Nguyễn Băng Băng 15:30:05 12/02/2019
531

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

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, nhưng đá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>

|
  • 1

    Vâng, nó hoạt động. Tôi đã sử dụng nội tuyến-flex trên css3 vì vậy tôi hoàn toàn quên mất cách lấy aproach này một cách chính xác. Tôi thực sự đánh giá cao nó, cảm ơn bạn rất nhiều.

    – Dương Thái Thảo 02:19:32 19/10/2013
  • 1

    Tôi đã mở tất cả ví dụ "Toàn màn hình" ở trên, tôi nhận thấy rằng căn chỉnh dọc luôn hơi quá gần màn hình (với độ phân giải 1920x1080, nhãn quá thấp 20 pixel trong màn hình). Tôi đã thực hiện phương pháp số 2 trong trang web của mình và gặp vấn đề tương tự ngay cả khi div không toàn màn hình. Vấn đề thậm chí còn tồi tệ hơn trong trang web của tôi. (100px quá thấp) ...

    – Tạ Minh Quốc 15:42:09 23/06/2015
  • 1

    Bạn có thể muốn thêm Cách tiếp cận 6, sử dụng flexbox (hoạt động trong IE9 +, [90% + độ phủ thị trường trình duyệt] (caniuse.com/#feat=flexbox)): display: flexở phụ huynh và align-self: centerở trẻ em.

    – Lý Việt Huy 10:07:50 11/07/2015
  • 1

    Đi theo phương pháp flexbox, bảo hiểm là tốt cho tôi. Cảm ơn rất nhiều cho câu trả lời tuyệt vời này!

    – Hồ Khả Khanh 15:45:10 06/11/2015
  • 1

    Tôi đã thay đổi một chút Cách tiếp cận 2: jsfiddle.net/yeaqrh48/278 . Kết quả là, bằng cách giảm chiều cao của cửa sổ, văn bản vượt ra ngoài phạm vi và nó trở nên không thể nhìn thấy. Làm thế nào để giải quyết vấn đề này?

    – Đỗ Bảo Lan 20:57:06 08/04/2016
18

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.

|
  • 1

    Tôi tin rằng sự thay đổi nên được transform: translateX(50%) translateY(50%);thay thế. Biến đổi ở trên không đúng về mặt cú pháp theo các tài liệu biến đổi Mozilla .

    – Trịnh Mai Thủy 06:47:32 03/06/2016
  • 1

    @EirikH Không chắc chắn những gì bạn đang xem, nhưng cú pháp đó chỉ tốt (và nói như vậy trong các tài liệu). Hầu hết các transformgiá trị có thể lấy giá trị X và Y có một hàm cơ bản để lấy cả hai và các hàm chuyên biệt để chỉ lấy một.

    – Trần Gia Khanh 14:49:14 02/03/2018
5

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 thùng chứa 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 !

|
3

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>

|
3

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>

|
2

    .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

|
1

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

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

|
1

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

|
1

Để đị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.

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

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

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

kéo dài : 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:

flex-start : Các vật phẩm thẳng hàng với bên trái của container.

flex-end : Các vật phẩm thẳng hàng với bên phải của container.

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

space-between : 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.

|
1

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>

|
1

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>

|
1

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

|
0

Đơ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)

|
0

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ử cha display: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>

|

Câu trả lời của bạn (> 20 ký tự)

Bằng cách click "Đăng trả lời", bạn đồng ý với Điều khoản dịch vụ, Chính sách bảo mật and Chính sách cookie của chúng tôi.

Không tìm thấy câu trả lời bạn tìm kiếm? Duyệt qua các câu hỏi được gắn thẻ hoặc hỏi câu hỏi của bạn.