Làm thế nào để trung tâm nội dung theo chiều dọc với chiều cao thay đổi trong một div?

Cách tốt nhất để tập trung theo chiều dọc nội dung của div khi chiều cao của nội dung là thay đổi. Trong trường hợp cụ thể của tôi, chiều cao của div container được cố định, nhưng sẽ rất tuyệt nếu có một giải pháp hoạt động trong trường hợp container có chiều cao thay đổi. Ngoài ra, tôi rất thích một giải pháp không có hoặc sử dụng rất ít các bản hack CSS và / hoặc đánh dấu phi ngữ nghĩa.

Chỉ cần thêm

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

đến div bên trong.

Những gì nó làm là di chuyển đường viền trên cùng của div bên trong đến một nửa chiều cao của div bên ngoài ( top: 50%;) và sau đó div bên trong tăng một nửa chiều cao của nó ( transform: translateY(-50%)). Điều này sẽ làm việc với position: absolutehoặc relative.

Hãy nhớ rằng transformvà translatecó các tiền tố nhà cung cấp không được bao gồm để đơn giản.

Codepen: http://codepen.io/anon/pen/ZYprdb

Đây dường như là giải pháp tốt nhất mà tôi đã tìm thấy cho vấn đề này, miễn là trình duyệt của bạn hỗ trợ ::beforephần tử giả: CSS-Tricks: Định tâm trong Unknown .

Nó không yêu cầu bất kỳ đánh dấu thêm và dường như hoạt động rất tốt. Tôi không thể sử dụng display: tablephương pháp này vì tablecác yếu tố không tuân theo max-heighttài sản.

.block {
  height: 300px;
  text-align: center;
  background: #c0c0c0;
  border: #a0a0a0 solid 1px;
  margin: 20px;
}

.block::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -0.25em; /* Adjusts for spacing */

  /* For visualization 
  background: #808080; width: 5px;
  */
}

.centered {
  display: inline-block;
  vertical-align: middle;
  width: 300px;
  padding: 10px 15px;
  border: #a0a0a0 solid 1px;
  background: #f5f5f5;
}

<div class="block">
    <div class="centered">
        <h1>Some text</h1>
        <p>But he stole up to us again, and suddenly clapping his hand on my
           shoulder, said&mdash;"Did ye see anything looking like men going
           towards that ship a while ago?"</p>
    </div>
</div>

Đây là điều tôi cần phải làm nhiều lần và một giải pháp nhất quán vẫn yêu cầu bạn thêm một chút đánh dấu phi ngữ nghĩa và một số hack cụ thể của trình duyệt. Khi chúng tôi nhận được hỗ trợ trình duyệt cho css 3, bạn sẽ có được định tâm thẳng đứng mà không phạm tội.

Để giải thích rõ hơn về kỹ thuật, bạn có thể xem bài viết mà tôi đã điều chỉnh từ đó , nhưng về cơ bản, nó liên quan đến việc thêm một yếu tố phụ và áp dụng các kiểu khác nhau trong IE và các trình duyệt hỗ trợ position:table\table-cellcác yếu tố không phải bảng.

<div class="valign-outer">
    <div class="valign-middle">
        <div class="valign-inner">
            Excuse me. What did you sleep in your clothes again last night. Really. You're gonna be in the car with her. Hey, not too early I sleep in on Saturday. Oh, McFly, your shoe's untied. Don't be so gullible, McFly. You got the place fixed up nice, McFly. I have you're car towed all the way to your house and all you've got for me is light beer. What are you looking at, butthead. Say hi to your mom for me.
        </div>
    </div>
</div>

<style>
    /* Non-structural styling */
    .valign-outer { height: 400px; border: 1px solid red; }
    .valign-inner { border: 1px solid blue; }
</style>

<!--[if lte IE 7]>
<style>
    /* For IE7 and earlier */
    .valign-outer { position: relative; overflow: hidden; }
    .valign-middle { position: absolute; top: 50%; }
    .valign-inner { position: relative; top: -50% }
</style>
<![endif]-->
<!--[if gt IE 7]> -->
<style>
    /* For other browsers */
    .valign-outer { position: static; display: table; overflow: hidden; }
    .valign-middle { position: static; display: table-cell; vertical-align: middle; width: 100%; }
</style>

Có nhiều cách (hack) để áp dụng các kiểu trong các bộ trình duyệt cụ thể. Tôi đã sử dụng các bình luận có điều kiện nhưng nhìn vào bài viết được liên kết ở trên để thấy hai kỹ thuật khác.

Lưu ý: Có những cách đơn giản để lấy định tâm dọc nếu bạn biết trước một số độ cao, nếu bạn đang cố gắng căn giữa một dòng văn bản hoặc trong một số trường hợp khác. Nếu bạn có nhiều chi tiết hơn thì hãy ném chúng vào vì có thể có một phương pháp không yêu cầu hack trình duyệt hoặc đánh dấu phi ngữ nghĩa.

Cập nhật: Chúng tôi đang bắt đầu nhận hỗ trợ trình duyệt tốt hơn cho CSS3, mang cả hộp flex và biến đổi thành phương pháp thay thế để lấy định tâm dọc (trong số các hiệu ứng khác). Xem câu hỏi khác này để biết thêm thông tin về các phương pháp hiện đại, nhưng hãy nhớ rằng hỗ trợ trình duyệt vẫn còn sơ sài cho CSS3.

Sử dụng bộ chọn con, tôi đã đưa ra câu trả lời đáng kinh ngạc của Fadi ở trên và đưa nó xuống chỉ một quy tắc CSS mà tôi có thể áp dụng. Bây giờ tất cả những gì tôi phải làm là thêm contentCenteredtên lớp vào các phần tử tôi muốn căn giữa:

.contentCentered {
  text-align: center;
}

.contentCentered::before {
  content: '';
  display: inline-block;
  height: 100%; 
  vertical-align: middle;
  margin-right: -.25em; /* Adjusts for spacing */
}

.contentCentered > * {
  display: inline-block;
  vertical-align: middle;
}

<div class="contentCentered">
  <div>
    <h1>Some text</h1>
    <p>But he stole up to us again, and suddenly clapping his hand on my
      shoulder, said&mdash;"Did ye see anything looking like men going
      towards that ship a while ago?"</p>
  </div>
</div>

Mã ngã baPen: http://codepen.io/dougli/pen/Eeysg

Kết quả tốt nhất cho tôi cho đến nay:

div là trung tâm:

position: absolute;
top: 50%;
transform: translateY(-50%);
margin: 0 auto;
right: 0;
left: 0;

Bạn có thể sử dụng lề tự động. Với flex, div dường như cũng được tập trung theo chiều dọc.

body,
html {
  height: 100%;
  margin: 0;
}
.site {
  height: 100%;
  display: flex;
}
.site .box {
  background: #0ff;
  max-width: 20vw;
  margin: auto;
}

<div class="site">
  <div class="box">
    <h1>blabla</h1>
    <p>blabla</p>
    <p>blablabla</p>
    <p>lbibdfvkdlvfdks</p>
  </div>
</div>

Đối với tôi cách tốt nhất để làm điều này là:

.container{
  position: relative;
}

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

Ưu điểm là không phải làm cho chiều cao rõ ràng

Đây là giải pháp tuyệt vời của tôi cho divchiều cao động (phần trăm).

CSS

.vertical_placer{
  background:red;
  position:absolute; 
  height:43%; 
  width:100%;
  display: table;
}

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

.inner_placer svg{
  position:relative;
  color:#fff;
  background:blue;
  width:30%;
  min-height:20px;
  max-height:60px;
  height:20%;
}

HTML

<div class="footer">
    <div class="vertical_placer">
        <div class="inner_placer">
            <svg> some Text here</svg>
        </div>
    </div>
</div>  

Hãy thử điều này một mình.

bạn có thể sử dụng màn hình flex như mã dưới đây:

.example{
  background-color:red;
  height:90px;
  width:90px;
  display:flex;
  align-items:center; /*for vertically center*/
  justify-content:center; /*for horizontally center*/
}

<div class="example">
    <h6>Some text</h6>
</div>