Tôi đang cố gắng để có được container màu xanh ở giữa màu hồng, tuy nhiên dường như vertical-align: middle;không thực hiện được công việc trong trường hợp đó.

<div style="display: block; position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;vertical-align: middle;background-color: pink;">
        <div style="background-color: lightblue;">test</div>
    </div>
</div>

Kết quả:

Sự mong đợi:

Xin đề nghị làm thế nào tôi có thể đạt được điều đó.

Jsfiddle

Trước hết lưu ý rằng vertical-alignchỉ áp dụng cho các ô của bảng và các phần tử mức nội tuyến.

Có một số cách để đạt được sự sắp xếp theo chiều dọc mà có thể hoặc không thể đáp ứng nhu cầu của bạn. Tuy nhiên tôi sẽ chỉ cho bạn hai phương pháp từ mục yêu thích của tôi:

1. Sử dụng transformvàtop

.valign {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    /* vendor prefixes omitted due to brevity */
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div style="text-align: left; position: absolute;height: 56px;background-color: pink;">
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Điểm mấu chốt là giá trị phần trăm trên topcó liên quan đến heightkhối chứa; Trong khi giá trị phần trăm trên transforms tương đối với kích thước của chính hộp (hộp giới hạn).

Nếu bạn gặp vấn đề kết xuất phông chữ (phông chữ mờ), cách khắc phục là thêm perspective(1px)vào transformkhai báo để nó trở thành:

transform: perspective(1px) translateY(-50%);

Điều đáng chú ý là CSS transform được hỗ trợ trong IE9 + .

2. Sử dụng inline-blockcác yếu tố (giả)

Trong phương pháp này, chúng ta có hai inline-blockphần tử anh chị em được sắp xếp theo chiều dọc ở giữa bằng cách vertical-align: middlekhai báo.

Một trong số chúng có một heighttrong 100%những cha mẹ của nó và cái còn lại là yếu tố mong muốn của chúng tôi mà chúng tôi muốn sắp xếp nó ở giữa.

.parent {
    text-align: left;
    position: absolute;
    height: 56px;
    background-color: pink;
    white-space: nowrap;
    font-size: 0; /* remove the gap between inline level elements */
}

.dummy-child { height: 100%; }

.valign {
    font-size: 16px; /* re-set the font-size */
}

.dummy-child, .valign {
    display: inline-block;
    vertical-align: middle;
}

<div style="position: absolute; left: 50px; top: 50px;">
    <div class="parent">
        <div class="dummy-child"></div>
        <div class="valign" style="background-color: lightblue;">test</div>
    </div>
</div>

Cuối cùng, chúng ta nên sử dụng một trong các phương thức có sẵn để loại bỏ khoảng cách giữa các yếu tố cấp độ nội tuyến .

dùng cái này :

.Absolute-Center {
    margin: auto;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
}

tham khảo liên kết này: https://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/

Sử dụng flex blox trong div vị trí vô tư của bạn để tập trung vào nội dung của nó.

Xem ví dụ https://plnkr.co/edit/wJIX2NpbNhO34X68ZyoY?p=preview

.some-absolute-div {    
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;

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

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

Trung tâm theo chiều dọc và chiều ngang:

.parent{
  height: 100%;
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}
.c{
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
}

Bạn có thể sử dụng display:table/table-cell;

.a{
   position: absolute; 
  left: 50px; 
  top: 50px;
  display:table;
}
.b{
  text-align: left; 
  display:table-cell;
  height: 56px;
  vertical-align: middle;
  background-color: pink;
}
.c {
  background-color: lightblue;
}

<div class="a">
  <div  class="b">
    <div class="c" >test</div>
  </div>
</div>

Đây là cách đơn giản bằng cách sử dụng đối tượng Top.

ví dụ: Nếu kích thước phần tử tuyệt đối là 60px.

.absolute-element { 
    position:absolute; 
    height:60px; 
    top: calc(50% - 60px);
}

Một giải pháp đơn giản bổ sung

HTML:

<div id="d1">
    <div id="d2">
        Text
    </div>
</div>

CSS:

#d1{
    position:absolute;
    top:100px;left:100px;
}

#d2{
    border:1px solid black;
    height:50px; width:50px;
    display:table-cell;
    vertical-align:middle;
    text-align:center;  
}

Vui lòng kiểm tra câu trả lời này cho một vấn đề tương tự.

Đây là cách dễ nhất mà tôi đã tìm thấy.

https://stackoverflow.com/a/26079837/4593442

GHI CHÚ. Tôi đã sử dụng màn hình: -webkit-flex; thay vì hiển thị: flex; để thử nghiệm bên trong safari.

BÓNG ĐÁ. Tôi chỉ là người mới, chia sẻ sự giúp đỡ từ một người có kinh nghiệm rõ ràng.

Bạn có thể làm điều đó bằng cách sử dụng display:table;trong div cha và display: table-cell; vertical-align: middle;div con

<div style="display:table;">
      <div style="text-align: left;  height: 56px;  background-color: pink; display: table-cell; vertical-align: middle;">
          <div style="background-color: lightblue; ">test</div>
      </div>
  </div>