Tôi có một divbộ thành display:block( 90px heightvà width), và tôi có một số văn bản bên trong.

Tôi cần văn bản được căn chỉnh ở trung tâm theo cả chiều dọc và chiều ngang.

Tôi đã thử text-align:center, nhưng nó không làm phần ngang, vì vậy tôi đã thử vertical-align:middle, nhưng nó không hoạt động.

Có ý kiến ​​gì không?

Nếu đó là một dòng văn bản và / hoặc hình ảnh, thì nó rất dễ thực hiện. Chỉ dùng:

text-align: center;
vertical-align: middle;
line-height: 90px;       /* The same as your div height */

Đó là nó. Nếu nó có thể là nhiều dòng, thì nó có phần phức tạp hơn. Nhưng có những giải pháp trên http://pmob.co.uk/ . Tìm "căn dọc".

Vì chúng có xu hướng bị hack hoặc thêm các div phức tạp ... Tôi thường sử dụng một bảng có một ô duy nhất để làm điều đó ... để làm cho nó đơn giản nhất có thể.

Cập nhật cho năm 2020:

Trừ khi bạn cần làm cho nó hoạt động trên các trình duyệt cũ hơn như Internet Explorer 10, bạn có thể sử dụng flexbox. Nó được hỗ trợ rộng rãi bởi tất cả các trình duyệt chính hiện tại . Về cơ bản, container cần được chỉ định là container flex, cùng với việc định tâm dọc theo trục chính và chéo của nó:

#container {
  display: flex;
  justify-content: center;
  align-items: center;
}

Để chỉ định chiều rộng cố định cho trẻ, được gọi là "mục flex":

#content {
  flex: 0 0 120px;
}

Ví dụ: http://jsfiddle.net/2woqsef1/1/

Để thu nhỏ nội dung, nó thậm chí còn đơn giản hơn: chỉ cần xóa flex: ...dòng khỏi mục flex và nó được tự động thu nhỏ lại.

Ví dụ: http://jsfiddle.net/2woqsef1/2/

Các ví dụ trên đã được thử nghiệm trên các trình duyệt chính bao gồm MS Edge và Internet Explorer 11.

Một lưu ý kỹ thuật nếu bạn cần tùy chỉnh nó: bên trong mục flex, vì mục flex này không phải là thùng chứa flex, cách CSS không phải là flexbox cũ hoạt động như mong đợi. Tuy nhiên, nếu bạn thêm một mục flex bổ sung vào thùng chứa flex hiện tại, hai mục flex sẽ được đặt theo chiều ngang. Để đặt chúng theo chiều dọc, thêm flex-direction: column;hộp chứa flex. Đây là cách nó hoạt động giữa một container flex và các phần tử con ngay lập tức của nó .

Có một phương pháp khác để thực hiện định tâm: bằng cách không chỉ định centerphân phối trên trục chính và trục chéo cho thùng chứa flex, mà thay vào đó chỉ định margin: autotrên mục flex để chiếm hết không gian thừa ở cả bốn hướng và lề phân bố đều sẽ làm cho mục flex tập trung ở tất cả các hướng. Điều này hoạt động trừ khi có nhiều mục flex. Ngoài ra, kỹ thuật này hoạt động trên MS Edge nhưng không phải trên Internet Explorer 11.

Cập nhật năm 2016/2017:

Nó có thể được thực hiện phổ biến hơn transformvà nó hoạt động tốt ngay cả trong các trình duyệt cũ hơn như Internet Explorer 10 và Internet Explorer 11. Nó có thể hỗ trợ nhiều dòng văn bản:

position: relative;
top: 50%;
transform: translateY(-50%);

Ví dụ: https://jsfiddle.net/wb8u02kL/1/

Để thu nhỏ chiều rộng:

Các giải pháp trên đã sử dụng một chiều rộng cố định cho khu vực nội dung. Để sử dụng chiều rộng được thu hẹp, sử dụng

position: relative;
float: left;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Ví dụ: https://jsfiddle.net/wb8u02kL/2/

Nếu cần hỗ trợ cho Internet Explorer 10, thì flexbox sẽ không hoạt động và phương thức trên và line-heightphương thức sẽ hoạt động. Nếu không, flexbox sẽ làm công việc.

Các kỹ thuật phổ biến tính đến năm 2014:

• 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%;
      transform: translateX(-50%) translateY(-50%);
  }

• 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: flex;
      align-items: center;
      justify-content: center;
  }

• 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 autogiả 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;
  }

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

• 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;
      text-align: center;
  }
  .parent > .child {
      line-height: 200px;
  }

Phương pháp 4 và 5 không đáng tin cậy nhất. Đi với một trong 3 đầu tiên.

Sử dụng flexbox / CSS:

<div class="box">
    <p>&#x0D05;</p>
</div>

CSS:

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

Lấy từ Mẹo nhanh: Cách đơn giản nhất để tập trung các yếu tố theo chiều dọc và theo chiều dọc

Thêm dòng display: table-cell;vào nội dung CSS của bạn cho div đó.

Chỉ các ô trong bảng hỗ trợ vertical-align: middle;, nhưng bạn có thể đưa định nghĩa [ô bảng] đó cho div ...

Một ví dụ trực tiếp có tại đây: http://jsfiddle.net/tH2cc/

div{
    height: 90px;
    width: 90px;
    text-align: center;
    border: 1px solid silver;
    display: table-cell; // This says treat this element like a table cell
    vertical-align:middle; // Now we can center vertically like in a TD
}

Tôi luôn sử dụng CSS sau đây cho một container, để căn giữa nội dung của nó theo chiều ngang và chiều dọc.

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

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

-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;

Xem nó trong hành động ở đây: https://jsfiddle.net/yp1gusn7/

Bạn có thể thử mã rất dễ dàng cho việc này:

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

.box{
  height: 90px;
  width: 90px;
  background: green;
  display: flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  Lorem
</div>

Liên kết Codepen: http://codepen.io/santoshkhalse/pen/xRmZwr

Cung cấp lớp CSS này cho <div> được nhắm mục tiêu:

.centered {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: red; /* Not necessary just to see the result clearly */
}

<div class="centered">This text is centered horizontally and vertically</div>

Bạn có thể sử dụng flextài sản ở cha mẹ div và thêm margin:autotài sản vào các mục con:

.parent {
    display: flex;
    /* You can change this to `row` if you want the items side by side instead of stacked */
    flex-direction: column;
}

/* Change the `p` tag to what your items child items are */
.parent p {
    margin: auto;
}

Bạn có thể xem thêm các tùy chọn flexở đây: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Cách tiếp cận 1

div {
  height: 90px;
  line-height: 90px;
  text-align: center;
  border: 2px dashed #f69c55;
}

<div>
  Hello, World!!
</div>

Cách tiếp cận 2

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>

Cách tiếp cận 3

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>

<div class="small-container">
    <span>Text centered</span>
</div>

<style>
.small-container {
    width:250px;
    height:250px;
    border:1px green solid;
    text-align:center;
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
.small-container span{
    position: absolute;
    top: 50%;
    left: 50%;
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>

# Parent
{
  display:table;
}

# Child
{
  display: table-cell;
  width: 100%; // As large as its parent to center the text horizontally
  text-align: center;
  vertical-align: middle; // Vertically align this element on its parent
}

Điều này làm việc cho tôi (đã kiểm tra OK!):

HTML:

<div class="mydiv">
    <p>Item to be centered!</p>
</div>

CSS:

.mydiv {
    height: 100%; /* Or other */
    position: relative;
}

.mydiv p {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%); /* To compensate own width and height */
}

Bạn có thể chọn các giá trị khác hơn 50%. Ví dụ: 25% đến trung tâm ở 25% phụ huynh.

<!DOCTYPE html>
<html>
  <head>
    <style>
      .maindiv {
        height: 450px;
        background: #f8f8f8;
        display: -webkit-flex;
        align-items: center;
        justify-content: center;
      }
      p {
        font-size: 24px;
      }
    </style>
  </head>

  <body>
    <div class="maindiv">
      <h1>Title</h1>
    </div>
  </body>
</html>

Bạn có thể thử các phương pháp sau:

1. Nếu bạn có một từ đơn hoặc một dòng câu, thì đoạn mã sau có thể thực hiện thủ thuật.

   Có một văn bản bên trong thẻ div và cung cấp cho nó một id. Xác định các thuộc tính sau cho id đó.

   id-name {
     height: 90px;
     line-height: 90px;
     text-align: center;
     border: 2px dashed red;
   }

   Lưu ý: Đảm bảo thuộc tính chiều cao của dòng giống với chiều cao của phép chia.

   Hình ảnh

   Nhưng, nếu nội dung có nhiều hơn một từ hoặc một dòng thì điều này không hoạt động. Ngoài ra, sẽ có lúc bạn không thể chỉ định kích thước của một phân chia theo px hoặc% (khi phân chia thực sự nhỏ và bạn muốn nội dung chính xác ở giữa).

2. Để giải quyết vấn đề này, chúng ta có thể thử kết hợp các thuộc tính sau.

   id-name {
     display: flex;
     justify-content: center;
     align-items: center;
     border: 2px dashed red;
   }

   Hình ảnh

   3 dòng mã này đặt nội dung chính xác ở giữa một bộ phận (không phân biệt kích thước của màn hình). Các "class-hạng mục: trung tâm" giúp định tâm thẳng đứng trong khi "biện minh-nội dung: Trung tâm" sẽ làm cho nó theo chiều ngang làm trung tâm.

   Lưu ý: Flex không hoạt động trong tất cả các trình duyệt. Đảm bảo bạn thêm tiền tố nhà cung cấp phù hợp để hỗ trợ trình duyệt bổ sung.

GRID

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.center {
    display: grid;
    justify-items: center;
    align-items: center;
}

.box {
    width: 200px;
    height: 100px;
    background: red;
}

<div class="box center">My text</div>

Điều chỉnh chiều cao dòng để có được sự liên kết dọc.

line-height: 90px;

Đây phải là câu trả lời đúng. Sạch sẽ và đơn giản nhất:

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

Áp dụng phong cách:

position: absolute;
top: 50%;
left: 0;
right: 0;

Văn bản của bạn sẽ được tập trung bất kể chiều dài của nó.

Điều này làm việc cho tôi:

.center-stuff{
    text-align: center;
    vertical-align: middle;
    line-height: 230px; /* This should be the div height */
}

Đối với tôi đây là giải pháp tốt nhất:

HTML:

 <div id="outer">  
     <img src="logo.png">
 </div>

CSS:

#outer {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

<!DOCTYPE html>
<html>
    <head>

    </head>
    <body>
        <div style ="text-align: center;">Center horizontal text</div>
        <div style ="position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%);">Center vertical text</div>
    </body>
</html> 

Mã thực sự đơn giản mà làm việc cho tôi! Chỉ cần một dòng và văn bản của bạn sẽ được căn giữa theo chiều ngang.

.center-horizontally{
  justify-content: center;
}

<Card.Footer className="card-body-padding center-horizontally">
  <label className="support-expand-text-light">Call or email Customer Support to change</label>
</Card.Footer>

Đầu ra trông như thế này:

Hãy bỏ phiếu cho câu trả lời này nếu nó hoạt động chỉ để dành chút thời gian của các nhà phát triển tìm kiếm giải pháp dễ dàng. Cảm ơn! :)

Hãy thử ví dụ sau đây. Tôi đã thêm các ví dụ cho mỗi thể loại: ngang và dọc

<!DOCTYPE html>
<html>
    <head>
        <style>
            #horizontal
            {
                text-align: center;
            }
            #vertical
            {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
         </style>
    </head>
    <body>
         <div id ="horizontal">Center horizontal text</div>
         <div id ="vertical">Center vertical text</div>
    </body>
</html>