Làm thế nào để trung tâm yếu tố vị trí tuyệt đối trong div?

1078

Tôi cần đặt một phần tử div(có position:absolute;) ở giữa cửa sổ của mình. Nhưng tôi đang gặp vấn đề khi làm như vậy, vì chiều rộng không rõ .

Tôi đã thử điều này. Nhưng nó cần phải được điều chỉnh vì chiều rộng là đáp ứng.

.center {
  left: 50%;
  bottom:5px;
}

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

— Tự do
nguồn

4

Bạn có một ví dụ trong các ví dụ trung tâm tuyệt đối có thể được khái quát trong các tình huống khác nhau.

— Mihai8

2

Có một câu trả lời tốt hơn cho câu hỏi này tại stackoverflow.com/questions/17976995/ Khăn

— Andrew Swift

1333

<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>
</body>

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

— hoàng tử
nguồn

76

Tuyệt vời. Đã làm cho tôi! Một vấn đề tôi gặp phải: Hình ảnh tôi đang định tâm khá lớn, điều này khiến div bên ngoài vượt ra ngoài cạnh phải của trang và gây ra cuộn ngang. Tôi đã đổi thuộc tính css "bên trái" thành "bên phải" và cho đến nay nó hoạt động tốt hơn kể từ khi đi qua cạnh trái của màn hình không gây ra cuộn

— BoomShaka

Điều gì sẽ xảy ra nếu người dùng đã cuộn trang xuống, overylay xuất hiện ở trên cùng, bạn có nghĩ rằng nên sử dụng jquery để khắc phục sự cố cuộn

— PUG

1

một giải pháp cho vấn đề cuộn có thể là position: fixedgì nhưng nếu không biết chiều cao của lớp phủ, các thanh cuộn cho lớp phủ sẽ phải được triển khai

— PUG

3

Có một vấn đề nhỏ tôi gặp phải khi sử dụng kỹ thuật này. Vì div ngoài chiếm 50% màn hình, một số dịch chuyển xảy ra khi văn bản rộng hơn 50% màn hình. Tôi đã giải quyết điều này bằng cách đặt div bên ngoài thành "width: 100%" và xóa thuộc tính bên trái. Đối với div bên trong, tôi chỉ cần đặt văn bản của mình căn giữa. Điều này giải quyết vấn đề.

— Nicky L.

3

Tỷ lệ phần trăm chiều cao liên quan đến khối chứa, trong trường hợp này <html>. Nhưng <html>phần tử không có heightchỉ định nên nó lấy chiều cao của tất cả nội dung trong tài liệu, không có gì vì nội dung duy nhất được định vị tuyệt đối (lấy ra khỏi luồng nội dung). Thêm height: 100%vào các <html>yếu tố làm cho một sự khác biệt cho điều này.

— bobince

1801

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

#content {
  position: absolute; 
  left: 0; 
  right: 0; 
  margin-left: auto; 
  margin-right: auto; 
  width: 100px; /* Need a specific value to work */
}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

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

— Matthias Weiler
nguồn

36

Tôi chỉ muốn vượt qua rằng các lề âm là CSS hoàn toàn hợp lệ và không nên được xem là một "hack bẩn". Lợi nhuận âm được đề cập trong đặc tả mô hình hộp W3C. Một số cá nhân dường như tự ý quyết định đó là hack vì họ a) không biết gì về họ, hoặc b) đang sử dụng chúng để sửa CSS xấu của họ.

— Joseph Ravenwolfe

58

chiều rộng của div được đặt ở giữa phải được đặt - sẽ không hoạt động tự động với, ví dụ, một nút có văn bản trên đó.

— Stefan

2

@Joshua Điều này sẽ chỉ tập trung theo chiều ngang, không theo chiều dọc như câu trả lời khác.

— ygoe

3

Tôi thích giải pháp này vì nó không làm tăng kích thước khung nhìn.

— Iceydee

13

Để hỗ trợ nhiều trình duyệt: widthnên được đặt thành một giá trị cụ thể để hoạt động này. autovà 100%sẽ không tập trung vào yếu tố. display: block;là phải position: absolute;KHÔNG phải là một điều bắt buộc. Tất cả các giá trị sẽ hoạt động. Yếu tố cha mẹ positionnên được đặt thành một cái gì đó khác hơn static. Thiết leftvà rightđến 0là không cần thiết. margin-left: auto; margin-right: auto;sẽ làm việc

— Onur Yıldırım

767

Giải pháp đáp ứng

Đây là một giải pháp tốt cho thiết kế đáp ứng hoặc kích thước không xác định nói chung nếu bạn không cần hỗ trợ IE8 trở xuống.

.centered-axis-x {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}

Hiển thị đoạn mã

.outer {
    position: relative; /* or absolute */
    
    /* unnecessary styling properties */
    margin: 5%;
    width: 80%;
    height: 500px;
    border: 1px solid red;
}

.inner {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    /* unnecessary styling properties */
    max-width: 50%;
    text-align: center;
    border: 1px solid blue;
}

<div class="outer">
    <div class="inner">I'm always centered<br/>doesn't matter how much text, height or width i have.<br/>The dimensions or my parent are irrelevant as well</div>
</div>

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

Đây là một Fiddle JS

Manh mối là, left: 50%tương đối với cha mẹ trong khi translatebiến đổi có liên quan đến chiều rộng / chiều cao của các phần tử.

Bằng cách này, bạn có một yếu tố tập trung hoàn hảo, với chiều rộng linh hoạt trên cả con và cha mẹ. Tiền thưởng: điều này hoạt động ngay cả khi đứa trẻ lớn hơn cha mẹ.

Bạn cũng có thể căn giữa nó theo chiều dọc với điều này (và một lần nữa, chiều rộng và chiều cao của cha mẹ và con cái có thể hoàn toàn linh hoạt (và / hoặc chưa biết)):

.centered-axis-xy {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
}

Hãy nhớ rằng bạn cũng có thể cần transformtiền tố của nhà cung cấp. Ví dụ-webkit-transform: translate(-50%,-50%);

— Vấn đềOfSumit
nguồn

26

Với hỗ trợ IE7 không còn cần thiết, đây sẽ là giải pháp thực tế. Giải pháp này tốt hơn so với kỹ thuật bên trái: 0 / phải: 0 vì điều đó làm cho các phần tử có chiều rộng đầy đủ trong khi điều này giữ lại chiều rộng và hoạt động trên các phần tử có chiều rộng không xác định.

— aleemb

51

Cho đến nay câu trả lời tốt nhất, điều này hoạt động nếu hộp div chứa trong nhỏ hơn trẻ em.

— Trường hợp

2

@ChadJohnson tất nhiên là có. Hãy thử nó với webkit-tiền tố như tôi đề nghị.

— Vấn

2

Ah, tôi đã bỏ lỡ ghi chú của bạn về -webkit. Tuyệt vời.

— Chad Johnson

3

transform: translatedường như position: fixedkhông thể sử dụng ở trẻ em Câu trả lời được chấp nhận hoạt động tốt hơn trong trường hợp này.

— dmvianna

49

Bài đăng thực sự tốt đẹp .. Chỉ muốn thêm nếu ai đó muốn làm điều đó với thẻ div duy nhất thì đây là cách:

Lấy widthnhư 900px.

#styleName {
    position: absolute;
    left: 50%;
    width: 900px;
    margin-left: -450px;
}

Trong trường hợp này người ta nên biết widthtrước.

— pratikabu
nguồn

26

"because the width is unknown"... điều này không trả lời câu hỏi

— Michel Ayres

15

hi @Michel thực sự khi bạn google tìm kiếm thứ gì đó liên quan đến việc định tâm div tuyệt đối, liên kết này là liên kết đầu tiên. Đó là lý do tại sao tôi đã thêm giải pháp này, trong trường hợp ai đó như tôi đang tìm kiếm giải pháp trên .. :)

— pratikabu

1

Không hữu ích lắm cho thiết kế đáp ứng, nhưng nó hoạt động với tôi cho đến khi tôi bắt đầu thực hiện các thiết kế đáp ứng. Đây là một câu trả lời hợp lệ cho việc định tâm các yếu tố chiều rộng được định vị tuyệt đối .

— Sean Kendle

35

Trung tâm tuyệt đối

HTML:

<div class="parent">
  <div class="child">
    <!-- content -->
  </div>
</div>

CSS:

.parent {
  position: relative;
}

.child {
  position: absolute;

  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  margin: auto;
}

Bản trình diễn: http://jsbin.com/rexuk/2/

Đã thử nghiệm trong Google Chrome, Firefox và IE8

Hi vọng điêu nay co ich :)

— Ijas Ameenudeen
nguồn

Điều này không làm việc, hãy kiểm tra các codepen sau codepen.io/anon/pen/YqWxjJ

— Đánh dấu

1

Xin lỗi tôi nghĩ rằng điều này sẽ hoạt động nhưng bạn cần bao gồm một codepen.io/anon/pen/WwxEYQ

— Đánh dấu

31

công việc này cho dọc và ngang

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

và nếu bạn muốn đặt trung tâm phần tử của cha mẹ, đặt vị trí của cha mẹ

 #parentElement{
      position:relative
  }

biên tập:

cho trung tâm dọc căn chỉnh chiều cao cho phần tử của bạn. cảm ơn @Raul
nếu bạn muốn đặt trung tâm phần tử của cha mẹ, đặt vị trí của cha mẹ thành tương đối

— Mohsen Abdollahi
nguồn

2

Tôi nghĩ bạn cần thêm chiều cao cho chiều dọc để làm việc.

— Raul

Có vẻ như vị trí này ở trung tâm của trang, không phải là trung tâm của một yếu tố khác.

— Günter Zöchbauer

1

@ GünterZöchbauer có, nếu bạn muốn tạo phần tử trung tâm của cha mẹ, đặt vị trí của cha mẹ.

— Mohsen Abdollahi

20

Tìm kiếm một giải pháp tôi có câu trả lời ở trên và có thể làm cho nội dung tập trung vào câu trả lời của Matthias Weiler nhưng sử dụng căn chỉnh văn bản.

#content{
  position:absolute;
  left:0;
  right:0;
  text-align: center;
}

Làm việc với chrome và Firefox.

— cavila
nguồn

5

Tôi nghĩ bạn không cần "text-align: centre"

— Tobias

Điều này đã khắc phục vấn đề của tôi ở đây . Cảm ơn!

— Volomike

Tôi cần "text-align: centre" và điều này đã hoạt động khi giải pháp được đề xuất bởi @ProbolsOfSumit không hoạt động vì nó làm cho văn bản của tôi được bọc.

— Nat

19

Nếu bạn cần phải tập trung theo chiều ngang và chiều dọc:

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

— michal.jakubeczy
nguồn

sửa chữa rất tuyệt cảm ơn

— Stanley Bateswar

15

** GIẢI PHÁP TRÁCH NHIỆM **

Giả sử phần tử trong div, là một div khác ...

giải pháp này hoạt động tốt

<div class="container">
  <div class="center"></div>
</div>

các thùng chứa có thể được bất kỳ kích thước (phải là vị trí tương đối)

.container {
position: relative;/*important*/
width: 200px;/*any width*/
height: 200px;/*any height*/
background: red;
}

Phần tử ( div ) cũng có thể là bất kỳ kích thước nào (phải nhỏ hơn vùng chứa )

.center {
position: absolute;/*important*/
top: 50%;/*position Y halfway in*/
left: 50%;/*position X halfway in*/
transform: translate(-50%,-50%);/*move it halfway back(x,y)*/
width: 100px;/*any width*/
height: 100px;/*any height*/
background: blue;
}

Kết quả sẽ như thế này. Chạy đoạn mã

.container {
	position: relative;
	width: 200px;
	height: 200px;
	background: red;
}

.center {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	width: 100px;
	height: 100px;
	background: blue;
}

<div class="container">
	<div class="center"></div>
</div>

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

Tôi thấy nó rất hữu ích

— RealMJDev
nguồn

1

Thiên tài. Tại sao người kia không nghĩ ra điều này.

— mesqueeb

Cảm ơn bạn, mã hóa hạnh phúc

— RealMJDev

13

Đây là một kết hợp của các câu trả lời khác, làm việc cho chúng tôi:

.el {
   position: absolute;
   top: 50%;
   margin: auto;
   transform: translate(-50%, -50%);
}

— Tai nạn
nguồn

Sửa chữa tốt đẹp cảm ơn người đàn ông!

— Stanley Bateswar

12

Tôi hiểu câu hỏi này đã có một vài câu trả lời, nhưng tôi chưa bao giờ tìm thấy một giải pháp nào có thể hoạt động trong hầu hết các lớp cũng có ý nghĩa và thanh lịch, vì vậy đây là câu hỏi của tôi sau khi điều chỉnh một bó:

.container {
    position: relative;
}

.container .cat-link {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%,-50%,0);
    z-index: 100;
    text-transform: uppercase; /* Forces CSS to treat this as text, not a texture, so no more blurry bugs */
    background-color: white;
}

.color-block {
  height: 250px;
  width: 100%;
  background-color: green;
}

<div class="container">
  <a class="cat-link" href="">Category</a>
  <div class="color-block"></div>
</div>

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

Những gì nó nói là cho tôi a top: 50%và a left: 50%, sau đó biến đổi (tạo không gian) trên cả trục X / Y thành -50%giá trị, theo nghĩa "tạo không gian gương".

Như vậy, điều này tạo ra một không gian bằng nhau trên tất cả 4 điểm của div, luôn luôn là một hộp (có 4 cạnh).

Điều này sẽ:

Làm việc mà không cần phải biết chiều cao / chiều rộng của cha mẹ.
Làm việc trên phản ứng nhanh.
Làm việc trên trục X hoặc Y. Hoặc cả hai, như trong ví dụ của tôi.
Tôi không thể đưa ra một tình huống mà nó không hoạt động.

— Daniel Rêu
nguồn

Vui lòng cho tôi biết nếu bạn tìm thấy một tình huống trong đó điều này không hoạt động để tôi có thể chỉnh sửa câu hỏi với đầu vào của bạn.

— Daniel Rêu

biến đổi / dịch sẽ khiến safari hiển thị văn bản bị mờ ở quy mô nhất định

— James Tan

@DanielMoss lý do nào để không sử dụng translate(-50%,-50%);?

— Đánh dấu Baijens

12

Hoạt động trên bất kỳ chiều rộng không xác định ngẫu nhiên nào của phần tử được định vị tuyệt đối mà bạn muốn có ở giữa phần tử vùng chứa của mình.

Bản giới thiệu

<div class="container">
  <div class="box">
    <img src="https://picsum.photos/200/300/?random" alt="">
  </div>
</div>

.container {
  position: relative;
  width: 100%;
}

.box {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

— lowTechsun
nguồn

9

Flex có thể được sử dụng để tập trung vào vị trí tuyệt đối div.

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

Hiển thị đoạn mã

.relative {
  width: 275px;
  height: 200px;
  background: royalblue;
  color: white;
  margin: auto;
  position: relative;
}

.absolute-block {
  position: absolute;
  height: 36px;
  background: orange;
  padding: 0px 10px;
  bottom: -5%;
  border: 1px solid black;
}

.center-text {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 1px 2px 10px 2px rgba(0, 0, 0, 0.3);
}

<div class="relative center-text">
  Relative Block
  <div class="absolute-block center-text">Absolute Block</div>
</div>

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

— Đức Giê-hô-va
nguồn

trên màn hình của tôi -Firefox 68.x, nó không thẳng hàng, khối tuyệt đối xuất hiện ở dưới cùng của khối tương đối

— Webdess

Bạn có thể thử cái này display: -webkit-flex;không?

— Dhaval Jardosh

7

Theo tôi biết, điều này là không thể đạt được cho một chiều rộng không xác định.

Bạn có thể - nếu điều đó hoạt động trong kịch bản của bạn - hoàn toàn định vị một phần tử vô hình với chiều rộng và chiều cao 100% và có phần tử được căn giữa trong đó bằng cách sử dụng lề: tự động và có thể căn chỉnh theo chiều dọc. Nếu không, bạn sẽ cần Javascript để làm điều đó.

— Bắc Kinh
nguồn

+1 cho điều "lề: tự động". Tôi đã thử điều này trước đây để căn giữa một div theo chiều ngang bằng cách sử dụng dòng "lề: 0 tự động" - "0" áp dụng cho lề dọc và "tự động" theo chiều ngang. Tôi nghĩ rằng đây là những gì StackOverflow sử dụng cho div cấp cao nhất để có được 2 viền trắng dày xuống hai bên của trang. Tuy nhiên, trang W3Schools trên lề CSS cho biết giá trị tự động rằng "Kết quả của việc này phụ thuộc vào trình duyệt" - Cá nhân tôi đã không thử nó trên nhiều trình duyệt khác nhau, vì vậy tôi thực sự không thể nhận xét về điểm này (nhưng nó rõ ràng là một mánh khóe trong một số trong số họ)

— Steg

1

có thể có chiều rộng (và chiều cao) không xác định nếu IE8 không phải là vấn đề. Xem câu trả lời của tôi để biết chi tiết.

— Vấn

7

Tôi muốn thêm vào câu trả lời của @ bobince:

<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>
</body>

Cải thiện: /// điều này làm cho thanh cuộn ngang không xuất hiện với các phần tử lớn trong div chính giữa.

<body>
    <div style="width:100%; position: absolute; overflow:hidden;">
        <div style="position:fixed; 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>
    </div>
</body>

— Lọ
nguồn

6

Đây là một plugin jQuery hữu ích để làm điều này. Tìm thấy ở đây . Tôi không nghĩ nó hoàn toàn có thể với CSS

/**
 * @author: Suissa
 * @name: Absolute Center
 * @date: 2007-10-09
 */
jQuery.fn.center = function() {
    return this.each(function(){
            var el = $(this);
            var h = el.height();
            var w = el.width();
            var w_box = $(window).width();
            var h_box = $(window).height(); 
            var w_total = (w_box - w)/2; //400
            var h_total = (h_box - h)/2;
            var css = {"position": 'absolute', "left": w_total+"px", "top":
h_total+"px"};
            el.css(css)
    });
};

— Ben Shelock
nguồn

Đây là cách tốt hơn, và đặc biệt là với thiết kế repsonsive.

— m4tm4t

Sẽ là tầm thường nếu jQuery được sử dụng trong mọi trường hợp

— Code Whisperer

8

Đây KHÔNG phải là cách tốt hơn. Luôn luôn tốt hơn để sử dụng CSS bất cứ khi nào có thể. Có thể định tâm DIV với CSS ở mọi trục và cho các trang phản hồi. Không cần JavaScript!

— Vấn

1

@yckart và trong trường hợp này công cụ là CSS.

— Vấn

5

phiên bản sass / la bàn của Giải pháp đáp ứng ở trên:

#content {
  position: absolute;
  left: 50%;
  top: 50%;
  @include vendor(transform, translate(-50%, -50%));
}

— Adam Spence
nguồn

4

transform: translate(-50%, -50%)làm cho văn bản và tất cả các nội dung khác bị mờ trên OS X bằng trình duyệt webkit. keithclark.co.uk/articles/gpu-text-rendering-in-webkit

— Yasha

Chỉ cần sử dụng loại khử răng cưa mà bạn thích -webkit-font-smoothing: antialiased;tôi đã lượm lặt được từ bài viết bạn đã đăng btw!

— Adam Spence

4

Phương pháp định tâm ưa thích của tôi:

position: absolute;
margin: auto;
width: x%

định vị phần tử khối tuyệt đối
lề tự động
cùng trái / phải, trên / dưới

JSFiddle ở đây

— vp_arth
nguồn

4

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

<div class="container><p>My text</p></div>

.container{
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

— Alan
nguồn

Đó là @Matthias Weiler trả lời 5 năm sau.

— aloisdg chuyển đến codidact.com

3

Tôi biết tôi đã cung cấp một câu trả lời, và câu trả lời trước đó của tôi, cùng với những người khác được đưa ra, hoạt động tốt. Nhưng tôi đã sử dụng điều này trong quá khứ và nó hoạt động tốt hơn trên một số trình duyệt nhất định và trong một số tình huống nhất định. Vì vậy, tôi nghĩ rằng id cũng đưa ra câu trả lời này. Tôi đã không "Chỉnh sửa" câu trả lời trước đó của mình và thêm nó vì tôi cảm thấy đây là một câu trả lời hoàn toàn riêng biệt và hai câu tôi cung cấp không liên quan.

HTML:

<div id='parent'>
  <div id='child'></div>
</div>

CSS:

#parent {
  display: table;
}
#child {
  display: table-cell;
  vertical-align: middle;
}

— Chất độc bụi
nguồn

3

#container
{
  position: relative;
  width: 100%;
  float:left
}
#container .item
{
  width: 50%;
  position: absolute;
  margin: auto;
  left: 0;
  right: 0;
}

— Burcu AKCAOGLU
nguồn

2

HTML

<div id='parent'>
  <div id='centered-child'></div>
</div>

CSS

#parent {
  position: relative;
}
#centered-child {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto auto;
}

http://jsfiddle.net/f51rptfy/

— Chất độc bụi
nguồn

2

Giải pháp này hoạt động nếu phần tử có widthvàheight

.wrapper {
  width: 300px;
  height: 200px;
  background-color: tomato;
  position: relative;
}

.content {
  width: 100px;
  height: 100px;
  background-color: deepskyblue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}

<div class="wrapper">
  <div class="content"></div>
</div>

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

— Mơ
nguồn

2

giải pháp cho câu hỏi này không hiệu quả với trường hợp của tôi .. Tôi đang làm chú thích cho một số hình ảnh và tôi đã giải quyết bằng cách sử dụng

top: 0;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;

display: flex;
align-items: center;

figure {
  position: relative;
  width: 325px;
  display: block
}


figcaption{
   
    position: absolute;
    background: #FFF;
    width: 120px;
    padding: 20px;

    -webkit-box-shadow: 0 0 30px grey;
    box-shadow: 0 0 30px grey;
    border-radius: 3px;
    display: block;
    
    top: 0;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    
    display: flex;
    align-items: center;
}

<figure>
  <img  src="https://picsum.photos/325/600">
  <figcaption> 
			But as much
    </figcaption>
                
</figure>

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

— Marcogomesr
nguồn

1

HTML:

<div class="wrapper">
    <div class="inner">
        content
    </div>
</div>

CSS:

.wrapper {
    position: relative;

    width: 200px;
    height: 200px;

    background: #ddd;
}

.inner {
    position: absolute;
    top: 0; bottom: 0;
    left: 0; right: 0;
    margin: auto;

    width: 100px;
    height: 100px;

    background: #ccc;
}

Đây và nhiều ví dụ ở đây

1

Đây là một mẹo tôi đã tìm ra để khiến một DIV nổi chính xác ở giữa trang. Tất nhiên là xấu xí, nhưng làm việc trong tất cả

Chấm và dấu gạch ngang

<div style="border: 5 dashed red;position:fixed;top:0;bottom:0;left:0;right:0;padding:5">
    <table style="position:fixed;" width="100%" height="100%">
        <tr>
            <td style="width:50%"></td>
            <td style="text-align:center">
                <div style="width:200;border: 5 dashed green;padding:10">
                    Perfectly Centered Content
                </div>
            </td>
            <td style="width:50%"></td>
        </tr>
    </table>
</div>

Sạch hơn

Wow, năm năm vừa mới trôi qua, phải không?

<div style="position:fixed;top:0px;bottom:0px;left:0px;right:0px;padding:5px">
<table style="position:fixed" width="100%" height="100%">
    <tr>
        <td style="width:50%"></td>
        <td style="text-align:center">
            <div style="padding:10px">
                <img src="Happy.PM.png">
                <h2>Stays in the Middle</h2>
            </div>
        </td>
        <td style="width:50%"></td>
    </tr>
</table>

— Ông B
nguồn

1

.center {
  position: absolute
  left: 50%;
  bottom: 5px;
}

.center:before {
    content: '';
    display: inline-block;
    margin-left: -50%;
}

— Hà Nội
nguồn

0

Bạn có thể đặt hình ảnh trong div và thêm id div và có CSS cho div đó có text-align:center

HTML:

<div id="intro_img">

    <img src="???" alt="???">

</div>

CSS:

#intro_img {
    text-align:center;
}

— Dworvin Vonstrangle
nguồn

0

#content { margin:0 auto; display:table; float:none;}

<body>
  <div>
    <div id="content">
      I'm the content
    </div>
  </div>
</body>

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

— amit bende
nguồn

0

Một cách tiếp cận đơn giản giúp tôi tập trung theo chiều ngang một khối có chiều rộng không xác định:

<div id="wrapper">
  <div id="block"></div>
</div>

#wrapper { position: absolute; width: 100%; text-align: center; }
#block { display: inline-block; }

Thuộc tính căn chỉnh văn bản có thể được thêm vào bộ quy tắc #block để căn chỉnh nội dung của nó độc lập với sự liên kết của khối.

Điều này hoạt động trên các phiên bản gần đây của Firefox, Chrome, IE, Edge và Safari.

— Terence Bandoian
nguồn