Câu hỏi Làm cách nào để căn giữa văn bản với CSS?


Tôi có một phần tử div chứa văn bản và tôi muốn căn chỉnh nội dung của trung tâm theo chiều dọc div này.

Đây là phong cách div của tôi:

#box {
  height: 170px;
  width: 270px;
  background: #000;
  font-size: 48px;
  color: #FFF;
  text-align: center;
}
<div id="box">
  Lorem ipsum dolor sit
</div>

Cách tốt nhất để làm việc này là gì?


1811
2018-01-14 21:25


gốc


có thể trùng lặp Làm cách nào để căn giữa văn bản theo chiều dọc với css - leonbloy
có thể trùng lặp Cách tốt nhất để căn giữa <div> trên một trang theo chiều dọc và chiều ngang? - Dan Dascalescu
Tham khảo W3C: w3.org/Style/Examples/007/center.en.html - nu everest
Cách hiện đại: sử dụng uốn cong - Mistalis
Các đoạn mã trên trang này sẽ hoạt động cho bạn: codepuran.com/web-designing/… - Akshay Pethani


Các câu trả lời:


Bạn có thể thử phương pháp cơ bản này:

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}
<div>
  Hello World!
</div>

Nó chỉ hoạt động cho một dòng văn bản mặc dù, bởi vì chúng tôi thiết lập chiều cao của dòng với cùng chiều cao như phần tử hộp chứa.


Một cách tiếp cận linh hoạt hơn

Đây là một cách khác để căn chỉnh văn bản theo chiều dọc. Giải pháp này sẽ hoạt động cho một dòng và nhiều dòng văn bản, nhưng nó vẫn yêu cầu một vùng chứa chiều cao cố định:

div {
  height: 200px;
  line-height: 200px;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Haec et tu ita posuisti, et verba vestra sunt. Non enim iam stirpis bonum quaeret, sed animalis. </span>
</div>

CSS chỉ kích thước <div>, theo chiều dọc trung tâm căn chỉnh <span> bằng cách đặt <div>'s line-height bằng chiều cao của nó, và làm cho <span> một khối nội tuyến với vertical-align: middle. Sau đó, nó đặt chiều cao dòng trở lại bình thường cho <span>, vì vậy nội dung của nó sẽ chảy tự nhiên bên trong khối.


Mô phỏng hiển thị bảng

Và đây là một tùy chọn khác, có thể không hoạt động trên các trình duyệt không hỗ trợ display: table và display: table-cell (về cơ bản chỉ là Internet Explorer 7). Sử dụng CSS, chúng tôi mô phỏng hành vi của bảng (vì các bảng hỗ trợ căn chỉnh theo chiều dọc) và HTML giống như ví dụ thứ hai:

div {
  display: table;
  height: 100px;
  width: 100%;
  text-align: center;
  border: 2px dashed #f69c55;
}
span {
  display: table-cell;
  vertical-align: middle;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>


Sử dụng định vị tuyệt đối

Kỹ thuật này sử dụng phần tử được định vị tuyệt đối trên cùng, dưới cùng, trái và phải đến 0. Nó được mô tả chi tiết hơn trong một bài viết trong tạp chí Smashing, Trung tâm ngang và dọc tuyệt đối trong CSS.


2452
2018-03-06 08:15



Bởi vì nó đi sai nếu thay đổi div hoặc văn bản hoặc nhiều nội dung được thêm vào. - Rob
Nhưng đây là những gì ông nói, nếu bạn biết có bao nhiêu văn bản bạn sẽ sử dụng nó hoàn toàn chấp nhận được ... giải pháp dưới đây là tuy nhiên linh hoạt hơn - acSlater
Chỉ có cách tiếp cận thứ 3 hoạt động tốt trên Firefox 22.0 của tôi, tuy nhiên nó không hoạt động cho tất cả các trình duyệt. 2 phương pháp đầu tiên ngừng hoạt động đúng khi tôi thay đổi kích thước chiều cao cho div - YMC
Làm cách nào tôi có thể đạt được cùng một mục tiêu với chiều cao của div được đặt thành: "height: 100%;" ? - Fedor
Các table-cell kỹ thuật khá thú vị nhưng nội dung được thay đổi kích thước để phù hợp với vùng chứa chính. Đây là một kỹ thuật tuyệt vời từ CSS Tricks, sử dụng phần tử giả before: css-tricks.com/centering-in-the-unknown . Nội dung không được thay đổi kích thước theo cách này, nhưng nó chỉ hoạt động trong IE8 +. - Ian Campbell


Một cách khác (chưa được đề cập ở đây) là với Flexbox.

Chỉ cần thêm mã sau vào thùng đựng hàng thành phần:

display: flex;
justify-content: center; /* align horizontal */
align-items: center; /* align vertical */

Bản trình diễn Flexbox 1

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
  justify-content: center;
  /* align horizontal */
  align-items: center;
  /* align vertical */
}
<div class="box">
  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</div>

Ngoài ra, thay vì căn chỉnh nội dung thông qua thùng đựng hàng, flexbox cũng có thể tập trung flex item với một lề tự động  khi chỉ có một flex-mục trong thùng chứa flex (như ví dụ được đưa ra trong câu hỏi trên).

Vì vậy, để căn giữa các mục flex cả theo chiều ngang và chiều dọc chỉ cần đặt nó với margin:auto

Bản trình diễn Flexbox 2

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 24px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  padding: 0 20px;
  margin: 20px;
  display: flex;
}
.box span {
  margin: auto;
}
<div class="box">
  <span>margin:auto on a flex item centers it both horizontally and vertically</span> 
</div>

NB: Tất cả những điều trên áp dụng cho các mục định tâm khi đặt chúng vào hàng ngang. Đây cũng là hành vi mặc định, bởi vì theo mặc định, giá trị cho flex-direction Là row. Tuy nhiên, nếu cần phải đặt các mặt hàng flex vào Cột dọc, sau đó flex-direction: column nên được đặt trên vùng chứa để đặt trục chính làm cột và bổ sung justify-content và align-items các thuộc tính hiện đang hoạt động cách khác xung quanh với justify-content: center định tâm theo chiều dọc và align-items: center định tâm theo chiều ngang)

flex-direction: column bản giới thiệu

.box {
  height: 150px;
  width: 400px;
  background: #000;
  font-size: 18px;
  font-style: oblique;
  color: #FFF;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* vertically aligns items */
  align-items: center;
  /* horizontally aligns items */
}
p {
  margin: 5px;
  }
<div class="box">
  <p>
    When flex-direction is column...
  </p>
  <p>
    "justify-content: center" - vertically aligns
  </p>
  <p>
    "align-items: center" - horizontally aligns
  </p>
</div>

Một nơi tốt để bắt đầu với Flexbox để xem một số tính năng của nó và nhận cú pháp để hỗ trợ trình duyệt tối đa là flexyboxes 

Ngoài ra, hỗ trợ trình duyệt hiện nay rất tốt: caniuse

Để có khả năng tương thích giữa các trình duyệt cho display: flex và align-items, bạn có thể sử dụng như sau:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

960
2018-01-14 21:29



Bảng hỗ trợ Flexbox - user
+1 hoạt động tốt khi div chiếm toàn bộ chiều rộng của màn hình - Andrew Bringaze
Điều này cũng phù hợp với tôi, phần còn lại không hoạt động trên trang web của tôi. Nhưng studio trực quan không nhận ra display: flex. - Antonio Ooi
IE = chúng ta không bao giờ có những điều tốt đẹp - Andrew Hoffman
Đây là BOMB !!!! Điều này hoạt động giống như một ông chủ trong trình duyệt Chrome và Android Chrome. - Frank


Bạn có thể dễ dàng thực hiện việc này bằng cách thêm đoạn mã CSS sau:

display: table-cell;
vertical-align: middle;

Điều đó có nghĩa là CSS của bạn cuối cùng trông giống như sau:

#box {
  height: 90px;
  width: 270px;
  background: #000;
  font-size: 48px;
  font-style: oblique;
  color: #FFF;
  text-align: center;
  margin-top: 20px;
  margin-left: 5px;
  display: table-cell;
  vertical-align: middle;
}
<div id="box">
  Some text
</div>


110
2017-10-25 18:12



Dường như giết chết các thuộc tính margin. - Tim
Lưu ý rằng giải pháp này không hỗ trợ IE7 - mrtsherman
@mrtsherman Hay đúng hơn, IE7 không hỗ trợ giải pháp này. ;-) - James McLaughlin
@Costa - Bạn có thể phải nổi div cha mẹ là tốt, nếu bạn đang nổi một cái gì đó bên trong div này ... kiểm tra stackoverflow.com/questions/2062258/… - Ian Campbell
Nó vô hiệu hóa min-heigth. - Penguin


Để tham khảo và thêm câu trả lời đơn giản hơn:

CSS tinh khiết:

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Hoặc dưới dạng SASS / SCSS Mixin:

@mixin vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

Sử dụng bởi:

.class-to-center {
    @include vertical-align;
}

Bài đăng trên blog của Sebastian Ekström Dọc thẳng bất cứ thứ gì chỉ với 3 dòng CSS:

Phương pháp này có thể khiến các phần tử bị mờ do phần tử được đặt trên “nửa pixel”. Một giải pháp cho việc này là đặt phần tử cha của nó thành bảo toàn-3d. Như sau:

.parent-element {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

Chúng tôi sống vào năm 2015 trở lên và Hộp Flex được hỗ trợ bởi mọi trình duyệt hiện đại chính.

Nó sẽ là cách các trang web được thực hiện từ đây trở đi.

Học nó!


97
2017-08-11 11:59



CSS tinh khiết: đã thực hiện thủ thuật cho tôi, nhưng bằng cách nào đó tôi phải sử dụng absolute định vị .. - d4Rk
Tôi có cùng một vấn đề với @ d4Rk. Thùng chứa (khối) của tôi có vị trí tương đối và chiều cao, và vật phẩm cần phải căn giữa (hình ảnh) phải được đặt hoàn toàn. Thật là một vấn đề phức tạp / đơn giản !! Đây là hy vọng có một sửa chữa đơn giản / đơn giản trong phiên bản tiếp theo của CSS. - Vanessa King


Tất cả tín dụng đều được chuyển đến chủ sở hữu liên kết này @Sebastian Ekström Liên kết; xin vui lòng đi qua điều này. Xem nó trong hành động codepen. Bằng cách đọc bài viết trên tôi cũng đã tạo một bản demo.

Chỉ với ba dòng CSS (không bao gồm tiền tố của nhà cung cấp), chúng ta có thể làm điều đó với sự giúp đỡ của một biến đổi: dịchY theo chiều dọc tập trung vào bất cứ điều gì chúng ta muốn, ngay cả khi chúng ta không biết chiều cao của nó.

Chuyển đổi thuộc tính CSS thường được sử dụng cho các phần tử xoay và chia tỷ lệ, nhưng với hàm dịchYY của chúng ta, bây giờ chúng ta có thể căn chỉnh các phần tử theo chiều dọc. Thông thường, điều này phải được thực hiện với định vị tuyệt đối hoặc thiết lập chiều cao dòng, nhưng chúng yêu cầu bạn phải biết chiều cao của phần tử hoặc chỉ hoạt động trên văn bản một dòng, v.v.

Vì vậy, để làm điều này, chúng tôi viết:

.element {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
} 

Đó là tất cả những gì bạn cần. Nó là một kỹ thuật tương tự với phương pháp vị trí tuyệt đối, nhưng với mặt trái mà chúng ta không phải đặt bất kỳ chiều cao nào trên phần tử hoặc thuộc tính position trên parent. Nó hoạt động thẳng ra khỏi hộp, ngay cả trong Internet Explorer 9!

Để làm cho nó đơn giản hơn, chúng ta có thể viết nó như một mixin với các tiền tố của nhà cung cấp của nó.


49
2017-12-13 20:09



Tôi đã làm thử nghiệm tối thiểu, nhưng dường như làm việc cho tôi! - Iain Collins
thay đổi kích thước phông chữ nó di chuyển khắp nơi - Jon49


Các hộp Flexbox được giới thiệu trong CSS3 là giải pháp:

section {
    display: flex;
    display: -webkit-flex;
    height: 200px;
    width: 50%;
    margin: auto;
    border-radius: 20px;
    border: 5px solid black;
    background-color: yellow;
}

p {
    text-align: center;
    margin: auto; /* Important */
    font-family: Calibri;
}
<section>
    <p>
        I'm center!<br/>
        Flexboxes are great!
    </p>
</section>

chú thích: Thay thế dòng trên được đánh dấu là quan trọng với một trong các dòng này, nếu bạn muốn căn giữa văn bản:

1) Chỉ theo chiều dọc:

margin: auto 0;

2) Chỉ theo chiều ngang:

margin: 0 auto;

CẬP NHẬT: Như tôi đã nhận thấy, mẹo này hoạt động với lưới (hiển thị: lưới), cũng vậy.


22
2017-08-28 10:11



Bạn có thể vui lòng giải thích tại sao flex có hiệu ứng này trong trường hợp này vào trung tâm đoạn? - elena
@elena Trong thực tế, tôi không biết chính xác lý do tại sao, tôi phát hiện ra khi tôi đang cố gắng. Tuy nhiên, nó sẽ là một xem xét cho các phiên bản mới hơn của CSS. Ví dụ, nếu bạn thay đổi hiển thị thành lưới trong trường hợp này, nó sẽ được làm việc giống như các flexbox. Tôi nghĩ rằng lưới và flexbox đi kèm với các tính năng mới để bù đắp các lỗi trước đó của CSS; và mẹo này là một trong số đó. - MAChitgarha


Cách tiếp cận linh hoạt

div {
  width: 250px;
  min-height: 50px;
  line-height: 50px;
  text-align: center;
  border: 1px solid #123456;
  margin-bottom:5px;
}
span {
  display: inline-block;
  vertical-align: middle;
  line-height: normal;
}
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
</div>
<div>
  <span>Lorem ipsum dolor sit amet.</span>
</div>
<div>


13
2018-06-29 09:26





Giải pháp được chấp nhận vì câu trả lời là hoàn hảo để sử dụng line-height giống như chiều cao của div, nhưng giải pháp này không hoạt động hoàn hảo khi văn bản được bao bọc HOẶC có hai dòng.

Hãy thử điều này nếu văn bản được bao bọc hoặc nằm trên nhiều dòng bên trong một div.

#box
{
  display: table-cell;
  vertical-align: middle;
}

Để tham khảo thêm, xem:


13
2018-04-15 08:28





Bạn cũng có thể sử dụng các thuộc tính bên dưới.

display: flex; 
align-content: center; 
justify-content : center;

9
2017-12-01 18:06



Cảm ơn 'satwik boorgula', tôi không nghĩ rằng vấn đề mã của bạn, có thể có một số xung đột trong mã của tôi. Tôi thử nghiệm với mã này: <div id = "topper" class = "container"> <span> Nội dung của bạn! </ Span> </ div> Nhưng nó có thể được sửa bằng mã sử dụng là 'michielvoo' được đề cập ở trên. - Masa S-AiYa