căn dọc giữa trong <div>

Tôi muốn giữ chiều cao của #abc divat 50pxvà văn bản để căn chỉnh theo chiều dọc ở giữa div.

body{
  padding: 0;
  margin: 0;
  margin: 0px auto;
}

#main{
  position: relative;
  background-color:blue;
  width:500px;
  height:500px;
}

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
}

<div id="main">
 <div id="abc">
     asdfasdfafasdfasdf
 </div>
</div>

Bạn có thể sử dụng line-height: 50px;, bạn sẽ không cần vertical-align: middle;ở đó.

Bản giới thiệu

Ở trên sẽ thất bại nếu bạn có nhiều dòng, vì vậy trong trường hợp đó, bạn có thể bọc văn bản của mình bằng cách sử dụng spanvà hơn là sử dụng display: table-cell;và display: table;cùng với đó vertical-align: middle;, cũng đừng quên sử dụng width: 100%;cho#abc

Bản giới thiệu

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  display: table;
  width: 100%;
}

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

Một giải pháp khác tôi có thể nghĩ đến ở đây là sử dụng thuộc transformtính với translateY()vị trí Yrõ ràng là viết tắt của Trục Y. Nó khá thẳng về phía trước ... Tất cả những gì bạn cần làm là đặt vị trí các yếu tố thành absolutevà vị trí sau 50%từ vị trí topvà dịch từ trục của nó với âm-50%

div {
  height: 100px;
  width: 100px;
  background-color: tomato;
  position: relative;
}

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

Bản giới thiệu

Lưu ý rằng điều này sẽ không được hỗ trợ trên các trình duyệt cũ hơn, ví dụ IE8, nhưng bạn có thể tạo IE9 và các phiên bản trình duyệt cũ hơn của Chrome và Firefox bằng cách sử dụng -ms, -mozvà -webkittiền tố tương ứng.

Để biết thêm thông tin về transform, bạn có thể tham khảo ở đây .

Thật đơn giản: cung cấp cho cha mẹ div này:

display: table;

và cung cấp cho (các) div con này:

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

Đó là nó!

.parent{
    display: table;
}
.child{
    display: table-cell;
    vertical-align: middle;
    padding-left: 20px;
}

<div class="parent">
    <div class="child">
        Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test
    </div>
    <div class="child">
        Test Test Test <br/> Test Test Test <br/> Test Test Test
    </div>
<div>

Câu hỏi cũ nhưng ngày nay CSS3 làm cho căn chỉnh dọc thực sự đơn giản !

Chỉ cần thêm vào #abccss sau:

display:flex;
align-items:center;

Demo đơn giản

Bản cập nhật câu hỏi gốc

Ví dụ đơn giản:

.vertical-align-content {
  background-color:#f18c16;
  height:150px;
  display:flex;
  align-items:center;
  /* Uncomment next line to get horizontal align also */
  /* justify-content:center; */
}

<div class="vertical-align-content">
  Hodor!
</div>

Tôi tìm thấy giải pháp này của Sebastian Ekstrom. Nó nhanh, bẩn và hoạt động rất tốt. Ngay cả khi bạn không biết chiều cao của cha mẹ:

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

Đọc toàn bộ bài viết ở đây .

Bạn có thể sử dụng Line height a lớn bằng chiều cao của div. Nhưng đối với tôi giải pháp tốt nhất là thế này ->position:relative; top:50%; transform:translate(0,50%);

Làm thế nào về việc thêm line-height?

#abc{
  font:Verdana, Geneva, sans-serif;
  font-size:18px;
  text-align:left;
  background-color:#0F0;
  height:50px;
  vertical-align:middle;
  line-height: 45px;
}

Fiddle, chiều cao dòng

Hoặc paddingtrên #abc. Đây là kết quả với phần đệm

Cập nhật

Thêm vào css của bạn:

#abc img{
   vertical-align: middle;
}

Kết quả . Hy vọng đây là những gì bạn đang tìm kiếm.

Thử cái này:

.main_div{
    display: table;
    width: 100%;
}
.cells {
    display: table-cell;
    vertical-align: middle;
}

Một phương pháp khác để định tâm div:

<div id="parent">
    <div id="child">Content here</div>
</div>

#parent {position: relative;}

#child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50px;
    height: 100px;
    margin: auto;
}

Sử dụng thuộc tính CSS của translY để căn giữa theo chiều dọc văn bản của bạn trong vùng chứa của nó

<style>
.centertext{

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

}
</style>

Và sau đó áp dụng nó cho DIV chứa của bạn

  <div class="centertext">
        <font style="color:white; font-size:20px;">   Your Text Here </font>
  </div>

Điều chỉnh tỷ lệ phần trăm cho phù hợp với nhu cầu của bạn. Hi vọng điêu nay co ich

Mã này dành cho Trung tâm dọc và ngang giữa mà không chỉ định chiều cao cố định:

.parent-class-name {
  position: relative;
}

.className {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
}