Căn giữa một vị trí: phần tử cố định

438

Tôi muốn tạo một position: fixed;hộp bật lên tập trung vào màn hình với chiều rộng và chiều cao động. Tôi đã sử dụng margin: 5% auto;cho điều này. Không có position: fixed;nó trung tâm tốt theo chiều ngang, nhưng không theo chiều dọc. Sau khi thêm position: fixed;, nó thậm chí không định tâm theo chiều ngang.

Đây là bộ hoàn chỉnh:

.jqbox_innerhtml {
    position: fixed;
    width: 500px;
    height: 200px;
    margin: 5% auto;
    padding: 10px;
    border: 5px solid #ccc;
    background-color: #fff;
}
<div class="jqbox_innerhtml">
    This should be inside a horizontally
    and vertically centered box.
</div>
Mở rộng đoạn trích

Làm cách nào để căn giữa hộp này trong màn hình với CSS?

css  css-position  centering 
— saturngod
nguồn

Câu trả lời:

605

Về cơ bản bạn cần phải thiết lập topvà leftđể 50%đến trung tâm góc trái trên cùng của div. Bạn cũng cần đặt margin-topvà margin-leftnửa âm của chiều cao và chiều rộng của div để dịch chuyển tâm về giữa của div.

Do đó, được cung cấp một <!DOCTYPE html>(chế độ tiêu chuẩn), điều này sẽ làm:

position: fixed;
width: 500px;
height: 200px;
top: 50%;
left: 50%;
margin-top: -100px; /* Negative half of height. */
margin-left: -250px; /* Negative half of width. */

Hoặc, nếu bạn không quan tâm đến trung theo chiều dọc và các trình duyệt cũ như IE6 / 7, sau đó bạn có thể thay vào đó cũng thêm left: 0và right: 0để nguyên tố này có một margin-leftvà margin-rightcủa auto, do đó các yếu tố vị trí cố định có chiều rộng cố định biết nơi nó trái và phải bù đắp bắt đầu. Trong trường hợp của bạn như vậy:

position: fixed;
width: 500px;
height: 200px;
margin: 5% auto; /* Will not center vertically and won't work in IE6/7. */
left: 0;
right: 0;

Một lần nữa, điều này chỉ hoạt động trong IE8 + nếu bạn quan tâm đến IE và trung tâm này chỉ theo chiều ngang chứ không phải theo chiều dọc.

— BalusC
nguồn
8
Tôi tìm thấy mánh khóe đó trong css-tricks.com/ . Nhưng khi tôi thay đổi chiều rộng và chiều cao, nó không di chuyển trung tâm. Ya, tôi nên thay đổi lề trái và trên cùng khi thay đổi chiều cao và chiều rộng.
— saturngod
2
FYI: điều này sẽ định vị chính xác mọi thứ ở giữa, nhưng không may là bạn mất thanh cuộn - mọi nội dung bị cắt bởi chế độ xem sẽ không thể truy cập được, ngay cả khi bạn cuộn, vì vị trí cố định dựa trên chế độ xem, không phải trang. Cho đến nay, giải pháp duy nhất tôi tìm thấy là với javascript.
— Groxx
3
Groxx Tôi nghĩ rằng bạn có thể đặt các thanh cuộn bên trong một div trong cửa sổ bật lên bằng cách sử dụng thuộc tính tràn .
— David Winiecki
1
Ngoài ra, đối với điều này, bạn cần biết chiều rộng của phần tử.
— Hector Ordonez
2
Ah. Nếu đó là trường hợp, tôi có nghĩa là tất nhiên kích thước trình duyệt sẽ là động, không chắc tại sao đó là trong câu hỏi. thay vào đó tôi nghĩ rằng anh ta có nghĩa là kích thước cửa sổ bật lên cần phải năng động. đó là trường hợp đối với tôi vì vậy tôi đang sử dụng biến đổi: dịch (-50%, -50%); hoạt động tuyệt vời ngoại trừ không có trên IE8.
— đêm
323

Tôi muốn tạo một hộp bật lên tập trung vào màn hình với chiều rộng và chiều cao động.

Đây là một cách tiếp cận hiện đại để định tâm theo chiều ngang một yếu tố có chiều rộng động - nó hoạt động trong tất cả các trình duyệt hiện đại; hỗ trợ có thể được nhìn thấy ở đây .

Ví dụ cập nhật

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

Đối với cả định tâm dọc và ngang, bạn có thể sử dụng như sau:

Ví dụ cập nhật

.jqbox_innerhtml {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

Bạn cũng có thể muốn thêm các thuộc tính tiền tố của nhà cung cấp (xem các ví dụ).

— Josh Crozier
nguồn
1
Tôi đang sử dụng phương pháp này để tập trung theo chiều ngang một hình ảnh được định vị cố định có chiều rộng lớn hơn chiều rộng cửa sổ và hoạt động tốt nhất trong các phiên bản Firefox, Chrome, IE 11 và Edge hiện tại.
— jelhan
1
Trong thử nghiệm của tôi, điều này hoạt động rất tốt (đằng sau tiền tố), Win10 Edge 14, Win7 IE9 +, Win10 Chrome, OSX Chrome, iPad4 Chrome & Safari, Android 4.4+ Chrome. Chỉ có thất bại với tôi là Android 4.0 khi bản dịch không xảy ra.
— danjah
2
@ahnbizcad, điều này hoạt động trong các trình duyệt máy tính để bàn như Chrome 61, Safari 11 và FireFox 65, nhưng không phải trong Chrome 61 trên Android 6, câu trả lời được chấp nhận hoạt động trong tất cả các trình duyệt.
— Erik Barke
5
Điều này làm cho hình ảnh bị mờ trong Chrome.
— Tomasz P. Szynalski
1
Bằng cách nào đó chỉ có cách tiếp cận hoạt động phù hợp trên tất cả các trình duyệt với img của tôi. Cảm ơn nhiều!
— Kugelfisch
136

Hoặc chỉ cần thêm left: 0và right: 0vào CSS gốc của bạn, làm cho nó hoạt động tương tự như một phần tử không cố định thông thường và kỹ thuật tự động lề thông thường hoạt động:

.jqbox_innerhtml
{
  position: fixed;
  width:500px;
  height:200px;
  background-color:#FFF;
  padding:10px;
  border:5px solid #CCC;
  z-index:200;
  margin: 5% auto;
  left: 0;
  right: 0;
}

Lưu ý rằng bạn cần sử dụng HTML (X) hợp lệ DOCTYPEđể nó hoạt động chính xác trong IE (tất nhiên bạn nên có dù sao đi nữa ..!)

— Sẽ hủy bỏ
nguồn
2
Theo nghĩa nào? Phần tử cha là phần tử cơ thể, không có viền. Nếu bạn đã thêm thuộc tính viền vào cơ thể (?!) Thì chắc chắn nó sẽ bị ảnh hưởng, như kỹ thuật 50% tôi tưởng tượng. Tôi đảm bảo với bạn rằng nó hoạt động tốt với các tham số đã cho, chỉ cần xác minh trong mọi trình duyệt tôi có và có thêm lợi ích là không phụ thuộc vào độ rộng của phần tử.
— Sẽ hủy trước
5
Tất cả những gì tôi đã làm là thêm 2 thuộc tính đó và một loại tài liệu vào HTML ví dụ của OP. Tuy nhiên, khi thử nghiệm thêm, có vẻ như IE7 (hoặc 8 ở chế độ compat) là vấn đề - có vẻ như nó không tôn trọng giá trị của righttài sản nếu leftcũng được đặt! ( msdn.microsoft.com/en-us/l Library / Ghi chú rằng leftvà rightchỉ có hỗ trợ "một phần" trong IE7). OK, tôi thừa nhận giải pháp này là không tốt nếu hỗ trợ IE7 là quan trọng, nhưng là một mẹo hay để nhớ cho tương lai :)
— Sẽ hủy trước
7
đây sẽ là câu trả lời được chấp nhận Tôi đã có hai vị trí cố định một cho mặt nạ độ mờ khác cho phương thức. đây là cách duy nhất tôi có thể tập trung vào phương thức vị trí cố định ở giữa màn hình. Câu trả lời tuyệt vời ai sẽ nghĩ?
— Chris Hawkes
3
Tôi đồng ý, đây sẽ là câu trả lời được chấp nhận. Nó cũng hoạt động hoàn hảo trong thiết kế đáp ứng, vì nó không phụ thuộc vào chiều rộng.
— Hector Ordonez
7
Tôi sẽ đề nghị đơn giản hóa câu trả lời, vì một số css chỉ có liên quan đến OP. Tất cả bạn cần là vị trí: cố định; trái: 0; phải: 0; lề: 0 tự động; .
— Hector Ordonez
23

Thêm một container như:

div {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

Sau đó đặt hộp của bạn vào div này sẽ làm việc.

— Romulus Urakagi Ts'ai
nguồn
"text-align: centre" không hoạt động với tôi trong việc định tâm div nội bộ.
— nima
2
Hộp nội bộ cần phải được display: inline-blockđể làm việc này. (Một số giá trị hiển thị khác cũng có thể hoạt động, chẳng hạn như table.)
— Brilliand
một cách tiếp cận tốt hơn cho css đã đề cập ở trên sẽ là thêm margin:auto;và thay đổi độ rộng thành width:50%hoặc width:400px. sau đó nội dung có thể là văn bản thẳng, phần tử khối hoặc phần tử nội tuyến.
— Joshua Đốt cháy
20

Chỉ cần thêm:

left: calc(-50vw + 50%);
right: calc(-50vw + 50%);
margin-left: auto;
margin-right: auto;
— Bob
nguồn
1
Điều này không làm việc với position: fixed, đó là những gì câu hỏi về. Nếu tôi sai, vui lòng chỉnh sửa câu trả lời của bạn để bao gồm một đoạn mã có thể chạy được.
— Flimm
1
nó hoạt động tuyệt vời với vị trí cố định.
— Phú Huệ
1
Nó hoạt động với position: fixed, được cung cấp thiết lập max-widthhoặc widththành phần.
— Js Lim
7 
#modal {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

bên trong nó có thể là bất kỳ yếu tố nào có chiều rộng, chiều cao hoặc không có diffenet. Tất cả đều là trung tâm.

— lời khen
nguồn
5

Giải pháp này không yêu cầu bạn xác định chiều rộng và chiều cao cho div popup của bạn.

http://jsfiddle.net/4Ly4B/33/

Và thay vì tính kích thước của cửa sổ bật lên và trừ một nửa lên trên cùng, javascript đang thay đổi kích thước popupContainer để điền vào toàn bộ màn hình ...

(100% chiều cao, không hoạt động khi sử dụng màn hình: ô bảng; (bắt buộc phải căn giữa một cái gì đó theo chiều dọc)) ...

Dù sao nó cũng hoạt động :)

— BjarkeCK
nguồn
4 
left: 0;
right: 0;

Không hoạt động theo IE7.

Thay đổi để 

left:auto;
right:auto;

Bắt đầu làm việc nhưng trong các trình duyệt còn lại thì nó ngừng hoạt động! Vì vậy, sử dụng cách này cho IE7 dưới đây

if ($.browser.msie && parseInt($.browser.version, 10) <= 7) {                                
  strAlertWrapper.css({position:'fixed', bottom:'0', height:'auto', left:'auto', right:'auto'});
}
— jatinder
nguồn
Bạn có nhớ chỉnh sửa câu trả lời của bạn để bao gồm toàn bộ giải pháp?
— Flimm
Điều này sẽ không hoạt động mà không có lề tự động ở bên trái và bên phải.
— RoM4iK
2

Về cơ bản bạn có thể bọc nó thành một cái khác divvà đặt nó positionthành fixed.

.bg {
  position: fixed;
  width: 100%;
}

.jqbox_innerhtml {
  width: 500px;
  height: 200px;
  margin: 5% auto;
  padding: 10px;
  border: 5px solid #ccc;
  background-color: #fff;
}
<div class="bg">
  <div class="jqbox_innerhtml">
    This should be inside a horizontally and vertically centered box.
  </div>
</div>
Mở rộng đoạn trích

— Abdulla Dlshad
nguồn
2

Tôi đã sử dụng vw(chiều rộng khung nhìn) và vh(chiều cao khung nhìn). Chế độ xem là toàn bộ màn hình của bạn. 100vwlà tổng chiều rộng màn hình của bạn và 100vhlà tổng chiều cao.

.class_name{
    width: 50vw;
    height: 50vh;
    border: 1px solid red;
    position: fixed;
    left: 25vw;top: 25vh;   
}
— Aseem
nguồn
1

Để khắc phục vị trí này, hãy sử dụng:

div {
    position: fixed;
    left: 68%;
    transform: translateX(-8%);
}
— Đầu và đuôi
nguồn
3
Vui lòng cung cấp một lời giải thích về lý do tại sao giải pháp của bạn sẽ làm việc cho câu hỏi được đăng.
— Shekhar Chikara
0

Một câu trả lời có thể có :

<!DOCTYPE HTML>
<html>
<head>
    <meta charset="UTF-8">
    <title>CSS Center Background Demo</title>
    <style type="text/css">
        body {
            margin: 0;
            padding: 0;
        }

        div.centred_background_stage_1 {
            position: fixed;
            z-index:(-1 );
            top: 45%;
            left: 50%;
        }

        div.centred_background_stage_2 {
            position: relative;
            left: -50%;

            top: -208px;
            /* % does not work.
               According to the
               http://reeddesign.co.uk/test/points-pixels.html
               6pt is about 8px

               In the case of this demo the background
               text consists of three lines with
               font size 80pt.

               3 lines (with space between the lines)
               times 80pt is about
               ~3*(1.3)*80pt*(8px/6pt)~ 416px

               50% from the 416px = 208px
             */

            text-align: left;
            vertical-align: top;
        }

        #bells_and_wistles_for_the_demo {
            font-family: monospace;
            font-size: 80pt;
            font-weight: bold;
            color: #E0E0E0;
        }

        div.centred_background_foreground {
            z-index: 1;
            position: relative;
        }
    </style>
</head>
<body>
<div class="centred_background_stage_1">
    <div class="centred_background_stage_2">
        <div id="bells_and_wistles_for_the_demo">
            World<br/>
            Wide<br/>
            Web
        </div>
    </div>
</div>
<div class="centred_background_foreground">
    This is a demo for <br/>
    <a href="http://stackoverflow.com/questions/2005954/center-element-with-positionfixed">
        http://stackoverflow.com/questions/2005954/center-element-with-positionfixed
    </a>
    <br/><br/>
    <a href="http://www.starwreck.com/" style="border: 0px;">
        <img src="./star_wreck_in_the_perkinnintg.jpg"
             style="opacity:0.1;"/>
    </a>
    <br/>
</div>
</body>
</html>
— Martin Vahi
nguồn
Điều này dường như không hoạt động, mặc dù nó đòi hỏi bạn phải biết chiều rộng và chiều cao của phần tử.
— Flimm
0

Hãy thử sử dụng điều này cho các yếu tố nằm ngang không đúng tâm.

chiều rộng: calc (chiều rộng: 100% - chiều rộng bất cứ điều gì khác nằm ngoài trung tâm của nó )

Ví dụ: nếu thanh điều hướng bên của bạn là 200px:

width: calc(100% - 200px);
— Robert Ross
nguồn
0

Tôi chỉ sử dụng một cái gì đó như thế này:

.c-dialogbox {
    --width:  56rem;
    --height: 32rem;

    position: fixed;

    width:  var(--width);
    height: var(--height);
    left:   calc( ( 100% - var(--width) ) / 2 );
    right:  calc( ( 100% - var(--width) ) / 2 );
    top:    calc( ( 100% - var(--height) ) / 2 );
    bottom: calc( ( 100% - var(--height) ) / 2 );
}

Nó tập trung vào hộp thoại theo cả chiều ngang và chiều dọc cho tôi và tôi có thể sử dụng chiều rộng và chiều cao khác nhau để phù hợp với các độ phân giải màn hình khác nhau để làm cho nó phản hồi nhanh, với các truy vấn phương tiện.

Không phải là một tùy chọn nếu bạn vẫn cần cung cấp hỗ trợ cho các trình duyệt có thuộc tính tùy chỉnh CSS hoặc calc()không được hỗ trợ (kiểm tra caniuse.)

— Fabien Snauwaert
nguồn
0

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

    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
— Flafy
nguồn
-13

Giải pháp hoàn hảo duy nhất là sử dụng bảng align = centre như trong:

<table align=center><tr><td>
<div>
...
</div>
</td></tr></table>

Tôi không thể tin rằng mọi người trên khắp thế giới đang lãng phí số tiền lớn này vào thời gian ngớ ngẩn để giải quyết vấn đề cơ bản như việc tập trung vào một div. Giải pháp css không hoạt động cho tất cả các trình duyệt, giải pháp jquery là một giải pháp tính toán phần mềm và không phải là một lựa chọn cho các lý do khác.

Tôi đã lãng phí quá nhiều thời gian nhiều lần để tránh sử dụng bảng, nhưng kinh nghiệm bảo tôi ngừng chiến đấu với nó. Sử dụng bảng để định tâm div. Hoạt động mọi lúc trong tất cả các trình duyệt! Không bao giờ lo lắng nữa.

— Sàng
nguồn
11
Điều này không trả lời câu hỏi nào cả. Không có CSS ​​không tương đương position:fixed.
— Brilliand
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.