676

Tôi đang gặp sự cố khi định tâm một phần tử có thuộc tính positionđược đặt thành absolute. Có ai biết tại sao các hình ảnh không phải là trung tâm?

body {
  text-align: center;
}

#slideshowWrapper {
  margin-top: 50px;
  text-align: center;
}

ul#slideshow {
  list-style: none;
  position: relative;
  margin: auto;
}

ul#slideshow li {
  position: absolute;
}

ul#slideshow li img {
  border: 1px solid #ccc;
  padding: 4px;
  height: 450px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="img/dummy1.JPG" alt="Dummy 1" /></li>
      <li><img src="img/piano_unlicened.JPG" alt="Dummy 2" /></li>
    </ul>
  </div>
</body>

Mở rộng đoạn trích

— người dùng1098278
nguồn

3

bạn cần cung cấp cho ul # slideshow một chiều rộng cố định ...

— ptriek

1190

Nếu bạn đã đặt chiều rộng, bạn có thể sử dụng:

position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
text-align: center;

— baaroz
nguồn

21

Đây là một câu trả lời rõ ràng hơn nhiều so với phần còn lại! Có bất kỳ cảnh báo?

— sbichenko

8

Câu trả lời thông minh nhất. Tôi vừa kiểm tra nó và nó hoạt động trên tất cả các trình duyệt. Nó không hoạt động trên IE8 nhưng nó hoạt động trên IE> = 9

— Roger

13

Hãy chắc chắn kiểm tra trong IE, thủ thuật này không hoạt động nếu phần tử có 'độ rộng tối đa' được thiết lập trong IE9

— aphax

33

Cá nhân tôi thích cú pháp "lề: 0 tự động; trái: 0; phải: 0;"

— Hector Ordonez

58

Điều này khá đơn giản là không hoạt động, trừ khi chiều rộng được đặt. Nó có thể hoạt động nếu bạn có căn chỉnh văn bản: tập trung vào phụ huynh và không có nền tảng về phần tử được định vị tuyệt đối, nhưng đặt nền trên đó và bạn sẽ thấy nó thực sự chiếm toàn bộ chiều rộng. Câu trả lời translateX (-50%) là câu trả lời đúng.

— Codemonkey

584

Không biết width/ heightcủa phần tử định vị ¹ , vẫn có thể căn chỉnh nó như sau:

VÍ DỤ TẠI ĐÂY

.child {
    position: absolute;
    top: 50%;  /* position the top  edge of the element at the middle of the parent */
    left: 50%; /* position the left edge of the element at the middle of the parent */

    transform: translate(-50%, -50%); /* This is a shorthand of
                                         translateX(-50%) and translateY(-50%) */
}

Điều đáng chú ý là CSS Transform được hỗ trợ trong IE9 trở lên . (Tiền tố nhà cung cấp bị bỏ qua cho ngắn gọn)

Giải trình

Thêm top/ leftcủa 50%di chuyển cạnh lề trên / trái của phần tử vào giữa cha mẹ và translate()hàm với giá trị (âm) của -50%di chuyển phần tử bằng một nửa kích thước của nó. Do đó phần tử sẽ được định vị ở giữa.

Điều này là do giá trị phần trăm trên top/ leftthuộc tính có liên quan đến chiều cao / chiều rộng của phần tử cha (đang tạo khối chứa).

Trong khi một giá trị phần trăm trên hàm biến đổi có liên quan đến chiều rộng / chiều cao của chính phần tử (Trên thực tế, nó đề cập đến kích thước của khung giới hạn ) .translate()

Đối với căn chỉnh đơn hướng, đi với translateX(-50%)hoặc translateY(-50%)thay vào đó.

^{1. Một yếu tố với một positionkhác static. Tức là relative, absolute, fixedgiá trị.}

— Hashem Qolami
nguồn

65

Đây phải là câu trả lời hàng đầu !!

— Chris Pine

3

Tuyệt diệu! Tốt nhất trong số rất nhiều!

— Bhargav Ponnapalli

4

Tôi đã tìm kiếm khắp nơi để tìm câu trả lời cho điều này và một lời giải thích tốt. Đây là câu trả lời tốt nhất hiện có và một lời giải thích tuyệt vời quá! Cảm ơn.

— Mike

5

Định tâm ngang : position: absolute; left: 50%; transform: translateX(-50%);, định tâm dọc : position: absolute; top: 50%; transform: translateY(-50%);.

— Toàn cảnh

1

Chỉ cần bây giờ tôi tìm thấy thuộc tính đó translate, dịch phần tử theo kích thước của chính nó , Không có vấn đề kích thước của cha mẹ của nó.

— Farzin Kanzi

185

Việc định tâm một cái gì đó được absoluteđịnh vị là khá phức tạp trong CSS.

ul#slideshow li {
    position: absolute;
    left:50%;
    margin-left:-20px;

}

Thay đổi margin-leftthành (âm) một nửa chiều rộng của phần tử bạn đang cố định chính giữa.

— bookcasey
nguồn

5

Khi kiểm tra điều này, nó không hoạt động khi hình ảnh có kích thước khác nhau và chúng vẫn chồng chất lên nhau

— Ryan Gibbons

3

Quá hack-ish (vì nó hầu như luôn luôn bật ra với css). Nhưng tuyệt vời! :-)

— Dr.Kameleon 7/12/13

1

Tôi bị cám dỗ bởi sự thông minh của một số câu trả lời khác, nhưng chỉ có điều này là đáng tin cậy đối với tôi.

— Chris Schiffhauer

Tôi có cùng một vấn đề như Ryan, vì vậy tôi đã thử câu trả lời thứ hai được đề xuất bởi "baaroz" và nó hiệu quả với tôi !!! và nó cũng hỗ trợ các độ phân giải khác nhau, vì DIV chính của tôi có độ rộng tính bằng% và không phải PX

— UID

Đây không thực sự là trung tâm. Vị trí này nằm ở bên phải

— Artsicle

81

Div trung tâm theo chiều dọc và chiều ngang

top: 0;
bottom: 0;
margin: auto;
position: absolute;
left: 0;
right: 0;

Lưu ý: Các yếu tố nên có chiều rộng và chiều cao được đặt

— Simon
nguồn

1

Tôi không biết tại sao điều này không được bình chọn nhiều hơn. Hoạt động trong tất cả các trình duyệt bao gồm cả trình duyệt di động theo như tôi có thể nói. Đường may đáng tin cậy hơn về mặt hỗ trợ. Thật đơn giản, dễ dàng và sạch sẽ ...

— David Martins

1

Đây là một câu trả lời tốt hơn. Nó chỉ yêu cầu một div để thực hiện và có nhiều trường hợp sử dụng hơn gọi trái: 50%;, top: 50%; thích giải pháp với hơn 69 phiếu bầu

— Ian S

Câu trả lời tốt nhất cho đến nay, bất kỳ ai đến đây nên kiểm tra nó!

— Abdo Adel

3

Phần tử cũng cần một heightbộ để làm việc này.

— alexbooots

55

Một mẹo CSS đơn giản, chỉ cần thêm:

width: 100%;
text-align: center;

Điều này hoạt động trên cả hình ảnh và văn bản.

— cutez7boyz
nguồn

48

Nếu bạn muốn tập trung vào một yếu tố tuyệt đối

#div {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Nếu bạn muốn một container được tập trung từ trái sang phải, nhưng không phải từ trên xuống dưới

#div {
    position:absolute;
    left:0;
    right:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Nếu bạn muốn một container được đặt ở giữa từ trên xuống dưới, bất kể từ trái sang phải

#div {
    position:absolute;
    top:0;
    bottom:0;
    width:300px; /* Assign a value */
    height:500px; /* Assign a value */
    margin:auto;
}

Cập nhật kể từ ngày 15 tháng 12 năm 2015

Vâng, tôi đã học được một mẹo mới khác vài tháng trước. Giả sử rằng bạn có một yếu tố cha mẹ tương đối.

Đây là yếu tố tuyệt đối của bạn.

.absolute-element { 
    position:absolute; 
    top:50%; 
    left:50%; 
    transform:translate(-50%, -50%); 
    width:50%; /* You can specify ANY width values here */ 
}

Với điều này, tôi nghĩ đó là một câu trả lời tốt hơn giải pháp cũ của tôi. Vì bạn không phải chỉ định chiều rộng VÀ chiều cao. Cái này nó điều chỉnh nội dung của chính phần tử.

— Wesley Brian Lachenal
nguồn

36

Để tập trung vào một vị trí của thành phố: yếu tố tuyệt đối.

.your-element {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center; // or this ->  margin: 0 auto;
}

— Linh hồn
nguồn

32

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

position: absolute;
left: 50%;
transform: translateX(-50%);

— Deplake
nguồn

27

đến trung tâm vị trí aa: thuộc tính tuyệt đối bạn cần đặt bên trái: 50% và lề trái: -50% chiều rộng của div.

<!-- for horizontal -->
<style>
div.center{
 width:200px;
 left:50%;
 margin-left:-100px;
 position:absolute;
}
</style>


<body>
 <div class='center'>
  should be centered horizontaly
 </div>
</body>

Đối với trung tâm dọc tuyệt đối, bạn cần thực hiện cùng một nụ không chỉ với bên trái. (LƯU Ý: html và thân phải có chiều cao tối thiểu 100%;)

<!-- for vertical -->
<style>
 body,html{
  min-height:100%;
 }
 div.center{
  height:200px;
  top:50%;
  margin-top:-100px;
  position:absolute;
 }
</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

và có thể được kết hợp cho cả hai

   <!-- for both -->
 <style>
 body,html{
  min-height:100%;
 }
 div.center{
  width:200px;
  height:50px
  left:50%;
  top:50%;
  margin-left:-100px;
  margin-top:-25px;
  position:absolute;
 }
</style>


<body>
 <div class='center'>
  should be centered
 </div>
</body>

— Rednas
nguồn

16

    <div class="centered_content"> content </div>
    <style type="text/css">
    .centered_content {
       text-align: center;
       position: absolute;
       left: 0;
       right: 0;
    }
    </style>

xem bản demo trên: http://jsfiddle.net/MohammadDayeh/HrZLC/

text-align: center; hoạt động với một position: absoluteyếu tố khi thêmleft: 0; right: 0;

— Mohammad Dayeh
nguồn

2

Vui lòng cung cấp một số loại bình luận hoặc lý do đằng sau lý do tại sao mã này hoạt động. Mã câu trả lời chắc chắn sẽ bị gắn cờ để xóa.

— rayryeng

14

Đơn giản hơn, tốt nhất:

img {
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            margin: auto auto;
            position: absolute;
}

Sau đó, bạn cần chèn thẻ img của mình vào một thẻ có vị trí thể thao: thuộc tính tương đối, như sau:

<div style="width:256px; height: 256px; position:relative;">
      <img src="photo.jpg"/>
</div>

— Stéphane de Luca
nguồn

8

có lẽ là ngắn nhất

position:absolute;
left:0;right:0;top:0;bottom:0;
margin:0 auto;

— Khủng hoảng
nguồn

1

Điều này khá tuyệt vời nhưng chỉ để tập trung theo chiều dọc và chiều ngang, chúng ta chỉ cần tạo lề tự động

— Santosh

7

Nếu bạn không biết chiều rộng của phần tử, bạn có thể sử dụng mã này:

<body>
<div style="position: absolute; left: 50%;">
    <div style="position: relative; left: -50%; border: dotted red 1px;">
        I am some centered shrink-to-fit content! <br />
        tum te tum
    </div>
</div>

Demo tại fiddle: http://jsfiddle.net/wrh7a21r/

Nguồn: https://stackoverflow.com/a/1777282/1136132

— josetegv
nguồn

@ NabiK.AZ ví dụ này hữu ích nếu bạn không biết chiều rộng của phần tử. Trong ví dụ của bạn, bạn đặt chiều rộng cho div.

— josetergv

7

Hoặc bây giờ bạn có thể sử dụng hộp flex với tư thế tuyệt đối:

.parent {
    position: relative;
    display: flex;
    justify-content: center;
}

.child {
    position: absolute;
}

— Sebastian Thomas
nguồn

điều này được đánh giá quá thấp

— Siege21x

5

Tôi không chắc chắn những gì bạn muốn thực hiện, nhưng trong trường hợp này chỉ cần thêm vào width: 100%;ý chí của bạn ul#slideshow lisẽ thực hiện thủ thuật.

Giải trình

Các imgthẻ là các yếu tố khối nội tuyến. Điều này có nghĩa là chúng chảy nội tuyến như văn bản, nhưng cũng có chiều rộng và chiều cao như các phần tử khối. Trong css của bạn, có hai text-align: center;quy tắc được áp dụng cho <body>và #slideshowWrapper(đó là btw dự phòng), điều này làm cho tất cả các phần tử con khối nội tuyến và nội tuyến được tập trung trong các phần tử khối gần nhất của chúng, trong mã của bạn là licác thẻ. Tất cả các phần tử khối có width: 100%nếu chúng là luồng tĩnh ( position: static;), là mặc định. Vấn đề là khi bạn nói với licác thẻ là position: absolute;, bạn đưa chúng ra khỏi dòng tĩnh thông thường và điều này khiến chúng thu nhỏ kích thước của chúng để vừa với nội dung bên trong của chúng, nói cách khác là chúng "làm mất" width: 100%tài sản của chúng .

— Konstantin Kalbazov
nguồn

5

Sử dụng left: calc(50% - Wpx/2);trong đó W là chiều rộng của phần tử làm việc cho tôi.

— Julix
nguồn

Làm thế nào để bạn xác định W?

— Áo tím

Anh ấy nói "một hình ảnh" - lý tưởng khi thực hiện các hình ảnh cho web mà bạn phải tạo ra hình ảnh ở kích thước mà bạn sẽ sử dụng nó (thay vì thay đổi kích thước nó) để tránh trọng lượng không cần thiết (nếu bạn tạo một hình ảnh lớn nhỏ) hoặc mờ (nếu bạn làm cho một hình ảnh nhỏ lớn). - Bạn có thể sử dụng "imageEuity.naturalHeight" và "imageEuity.naturalWidth" nếu bạn đang sử dụng jQuery và sau đó tạo kiểu động, nhưng điều đó hơi phức tạp. Để công bằng, nhiều câu trả lời khác cũng yêu cầu bạn phải biết chiều rộng của hình ảnh để kỹ thuật của chúng hoạt động.

— Julix

nếu bạn thực sự không rõ ràng về cách lấy W, trong Chrome, bạn có thể sử dụng CTRL + Shift + i (công cụ dành cho nhà phát triển), sau đó CTRL + Shift + C (chế độ kiểm tra) để di chuột qua các phần tử và xem mọi thứ rộng đến mức nào. Bạn cũng có thể quyết định độ rộng của bạn muốn và thêm "width: Wpx" vào css của bạn.

— Julix

4

Hình ảnh của bạn không được căn giữa vì các mục danh sách của bạn không được căn giữa; chỉ có văn bản của họ là trung tâm. Bạn có thể đạt được vị trí bạn muốn bằng cách căn giữa toàn bộ danh sách hoặc căn giữa hình ảnh trong danh sách.

Một phiên bản sửa đổi của mã của bạn có thể được tìm thấy ở phía dưới. Trong bản sửa đổi của tôi, tôi tập trung vào cả danh sách và hình ảnh trong đó.

Sự thật là bạn không thể tập trung vào một yếu tố có vị trí được đặt thành tuyệt đối.

Nhưng hành vi này có thể được bắt chước!

Lưu ý: Các hướng dẫn này sẽ hoạt động với bất kỳ thành phần khối DOM nào, không chỉ img.

Bao quanh hình ảnh của bạn bằng thẻ div hoặc thẻ khác (trong trường hợp của bạn là li).
```
<div class="absolute-div">
  <img alt="my-image" src="#">
</div>
```
Lưu ý: Tên được đặt cho các yếu tố này không đặc biệt.

Thay đổi css hoặc scss của bạn để đưa div định vị tuyệt đối và hình ảnh của bạn làm trung tâm.

.absolute-div {
  position: absolute;

  width: 100%; 
  // Range to be centered over. 

  // If this element's parent is the body then 100% = the window's width

  // Note: You can apply additional top/bottom and left/right attributes
  // i.e. - top: 200px; left: 200px;

  // Test for desired positioning.
}

.absolute-div img {
  width: 500px;
  // Note: Setting a width is crucial for margin: auto to work.

  margin: 0 auto;
}

Và bạn có nó rồi đấy! Img của bạn nên được tập trung!

Ma cua ban:

Thử thứ này đi:

body
{
  text-align : center;
}

#slideshow
{
  list-style : none;
  width      : 800px;
  // alter to taste

  margin     : 50px auto 0;
}

#slideshow li
{
  position : absolute;
}

#slideshow img
{
  border  : 1px solid #CCC;
  padding : 4px;
  height  : 500px;
  width   : auto;
  // This sets the width relative to your set height.

  // Setting a width is required for the margin auto attribute below. 

  margin  : 0 auto;
}

<ul id="slideshow">
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 1" /></li>
    <li><img src="http://lorempixel.com/500/500/nature/" alt="Dummy 2" /></li>
</ul>

Mở rộng đoạn trích

Tôi hy vọng nó sẽ có ích. Chúc may mắn!

— D3RPZ1LLA
nguồn

3

Một đối tượng tuyệt đối bên trong một đối tượng tương đối có liên quan đến cha mẹ của nó, vấn đề ở đây là bạn cần một chiều rộng tĩnh cho vùng chứa #slideshowWrappervà phần còn lại của giải pháp giống như những người dùng khác nói

body {
    text-align: center;
}

#slideshowWrapper {
    margin-top: 50px;
    text-align:center;
    width: 500px;
}

ul#slideshow {
    list-style: none;
    position: relative;
    margin: auto;
}

ul#slideshow li {
    position: relative;
    left: 50%;
}

ul#slideshow li img {
    border: 1px solid #ccc;
    padding: 4px;
    height: 450px;
}

http://jsfiddle.net/ejRTU/10/

— đêm giao thừa
nguồn

Fiddle của bạn khi hai hình ảnh chồng lên nhau.

— Ryan Gibbons

3

Đây là giải pháp dễ dàng và tốt nhất cho yếu tố trung tâm với vị trí:

 body,html{
  min-height:100%;
 }
 
 div.center{
 width:200px;
 left:50%;
 margin-left:-100px;/*this is 50% value for width of the element*/
 position:absolute;
 background:#ddd;
 border:1px solid #999;
 height:100px;
 text-align:center
 }

<style>

</style>

<body>
 <div class='center'>
  should be centered verticaly
 </div>
</body>

Mở rộng đoạn trích

— SantoshK
nguồn

2

Bạn có thể thử theo cách này:

* { margin: 0px; padding: 0px; }
#body { height: 100vh; width: 100vw; position: relative; 
        text-align: center; 
        background-image: url('https://s-media-cache-ak0.pinimg.com/originals/96/2d/ff/962dff2247ad680c542622e20f44a645.jpg'); 
         background-size: cover; background-repeat: no-repeat; }
.text { position: absolute; top: 0; bottom: 0; left: 0; right: 0; height:100px; 
        display: inline-block; margin: auto; z-index: 999999; }

<html>
<body>
	<div id="body" class="container-fluid">
	  <!--Background-->
	    <!--Text-->
		  <div class="text">
		    <p>Random</p>
		  </div>	  
	</div>
</body>
</html>

Mở rộng đoạn trích

— Chirag Dave
nguồn

1

Vị trí tuyệt đối đưa nó ra khỏi luồng và đặt nó ở 0x0 cho cha mẹ (Phần tử khối cuối cùng để có vị trí tuyệt đối hoặc vị trí tương đối).

Tôi không chắc chính xác những gì bạn đang cố gắng thực hiện, có lẽ tốt nhất là đặt li thành a position:relativevà điều đó sẽ tập trung vào chúng. Đưa ra CSS hiện tại của bạn

Hãy xem http://jsfiddle.net/rtg Ribbon / ejRTU / để chơi với nó

— Ryan Gibbons
nguồn

: / ở cuối là giải pháp gần giống như của bạn ... <Lên phiếu

— eveevans

1

#parent
{
    position : relative;
    height: 0;
    overflow: hidden;
    padding-bottom: 56.25% /* images with aspect ratio: 16:9  */
}

img 
{
    height: auto!important;
    width: auto!important;
    min-height: 100%;
    min-width: 100%;
    position: absolute;
    display: block;
    /*  */
    top: -9999px;
    bottom: -9999px;
    left: -9999px;
    right: -9999px;
    margin: auto;
}

Tôi không nhớ nơi tôi đã thấy phương pháp định tâm được liệt kê ở trên, sử dụng các giá trị âm trên, phải, dưới, trái. Đối với tôi, tehnique này là tốt nhất, trong hầu hết các tình huống.

Khi tôi sử dụng kết hợp từ phía trên, hình ảnh sẽ hoạt động giống như hình nền với các cài đặt sau:

background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;

Chi tiết khác về ví dụ đầu tiên có thể được tìm thấy ở đây:
Duy trì tỷ lệ khung hình của div với CSS

— Mary07
nguồn

0

Những gì dường như đang xảy ra là có hai giải pháp; tập trung sử dụng lề và trung tâm sử dụng vị trí. Cả hai đều hoạt động tốt, nhưng nếu bạn muốn định vị tuyệt đối một phần tử so với phần tử được căn giữa này, bạn cần sử dụng phương thức vị trí tuyệt đối, bởi vì vị trí tuyệt đối của phần tử thứ hai mặc định là cha mẹ đầu tiên được định vị. Thích như vậy:

<!-- CENTERED USING MARGIN -->
<div style="width:300px; height:100px; border: 1px solid #000; margin:20px auto; text- align:center;">
    <p style="line-height:4;">width: 300 px; margin: 0 auto</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:-20px; left:0px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

<!-- CENTERED USING POSITION -->
<div style="position:absolute; left:50%; width:300px; height:100px; border: 1px solid #000; margin:20px 0 20px -150px; text-align:center;">
    <p style="line-height:2;">width:300px; position: absolute; left: 50%; margin-left:-150px;</p>
    <div style="position:absolute; width:100px; height:100px; background-color:#ff0000; top:0px; left:-105px;">
        <p style="line-height:4;">Absolute</p>
    </div>
</div>

Cho đến khi tôi đọc bài đăng này, sử dụng kỹ thuật tự động lề: 0, để xây dựng một menu ở bên trái nội dung của tôi, tôi phải xây dựng một cột có cùng chiều rộng ở bên phải để cân bằng nó. Không đẹp. Cảm ơn!

— Trưởng khoa
nguồn

0

Sử dụng margin-left: x%;trong đó x là một nửa chiều rộng của phần tử.

— Bibaswann Bandyopadhyay
nguồn

-1

html, body, ul, li, img {
  box-sizing: border-box;
  margin: 0px;  
  padding: 0px;  
}

#slideshowWrapper {
  width: 25rem;
  height: auto;
  position: relative;
  
  margin-top: 50px;
  border: 3px solid black;
}

ul {
  list-style: none;
  border: 3px solid blue;  
}

li {
  /* center horizontal */
  position: relative;
  left: 0;
  top: 50%;
  width: 100%;
  text-align: center;
  font-size: 18px;
  /* center horizontal */
  
  border: 3px solid red; 
}

img {
  border: 1px solid #ccc;
  padding: 4px;
  //width: 200px;
  height: 100px;
}

<body>
  <div id="slideshowWrapper">
    <ul id="slideshow">
      <li><img src="http://via.placeholder.com/350x150" alt="Dummy 1" /></li>
      <li><img src="http://via.placeholder.com/140x100" alt="Dummy 2" /></li>
      <li><img src="http://via.placeholder.com/200x100" alt="Dummy 3" /></li>      
    </ul>
  </div>
</body>

Mở rộng đoạn trích

— linh dương
nguồn

1

Câu trả lời này chỉ có mã. Mặc dù có thể đúng, nhưng nó nên có một lời giải thích kèm theo về lý do tại sao mã trả lời câu hỏi của OP. Mã không phải là "tự giải thích" trên Stack Exchnge.

— JBH

Làm cách nào để tập trung vào vị trí của người dùng: yếu tố tuyệt đối

Giải trình

Giải trình

Nhưng hành vi này có thể được bắt chước!

Và bạn có nó rồi đấy! Img của bạn nên được tập trung!

Ma cua ban: