Làm cách nào để xoay ngang phần tử vị trí tuyệt đối nằm ngang trong div chiều rộng 100%?

Question

Trong ví dụ bên dưới, #logo được đặt ở vị trí hoàn toàn và tôi cần nó nằm ở giữa theo chiều ngang trong phạm vi #header. Thông thường, tôi sẽ làm một margin:0 auto cho các yếu tố tương đối vị trí nhưng tôi bị kẹt ở đây. Ai đó có thể chỉ cho tôi cách?

JS Fiddle: http://jsfiddle.net/DeTJH/

HTML

<div id="header"> 
    <div id="logo"></div> 
</div> 

CSS

#header { 
    background:black; 
    height:50px; 
    width:100%; 
} 

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px 
} 

Answer 1

Nếu bạn muốn sắp xếp trung tâm trên thuộc tính rời.
Điều tương tự đối với căn chỉnh trên cùng, bạn có thể sử dụng lề trên: (chiều rộng/2 của div của bạn), khái niệm này giống với thuộc tính bên trái.
Điều quan trọng là đặt phần tử tiêu đề thành vị trí: tương đối.
thử điều này:

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px; 
    left:50%; 
    margin-left:-25px; 
} 

DEMO

Nếu bạn muốn không sử dụng tính toán bạn có thể làm điều này:

#logo { 
    background:red; 
    width:50px; 
    height:50px; 
    position:absolute; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
} 

DEMO2

Answer 2

Bạn sẽ phải gán cả left và right thuộc tính 0 giá trị cho margin: auto để căn giữa logo.

Vì vậy, trong trường hợp này:

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px; 
    left: 0; 
    right: 0; 
    margin: 0 auto; 
} 

Bạn cũng có thể muốn đặt position: relative cho #header.

Điều này làm việc vì, thiết lập left và right về 0 sẽ kéo theo chiều ngang phần tử được định vị hoàn toàn. Bây giờ ma thuật xảy ra khi margin được đặt thành auto. margin chiếm hết không gian thừa (bằng nhau ở mỗi bên) để lại nội dung theo chỉ định width. Điều này dẫn đến nội dung trở thành căn giữa.

Answer 3

Theo kinh nghiệm của tôi, cách tốt nhất là right:0;, left:0; và margin:0 auto. Bằng cách này nếu div là rộng thì bạn không bị cản trở bởi left: 50%; mà sẽ bù đắp div của bạn mà kết quả trong việc thêm lợi nhuận tiêu cực vv

DEMO http://jsfiddle.net/kevinPHPkevin/DeTJH/4/

#logo { 
    background:red; 
    height:50px; 
    position:absolute; 
    width:50px; 
    margin:0 auto; 
    right:0; 
    left:0; 
} 

Answer 4

đây là phương pháp thực hành tốt nhất để tập trung một div như vị trí tuyệt đối

DEMO FIDDLE

mã -

#header { 
background:black; 
height:90px; 
width:100%; 
position:relative; // you forgot this, this is very important 
} 

#logo { 
background:red; 
height:50px; 
position:absolute; 
width:50px; 
margin: auto; // margin auto works just you need to put top left bottom right as 0 
top:0; 
bottom:0; 
left:0; 
right:0; 
} 

Answer 5

Được mất tích việc sử dụng calc trong câu trả lời, đó là một giải pháp sạch hơn.

#logo { 
    position: absolute; 
    left: calc(50% - 25px); 
    height: 50px; 
    width: 50px; 
    background: red; 
} 

trình trong hầu hết các trình duyệt hiện đại: http://caniuse.com/calc

Có lẽ vẫn còn quá sớm để sử dụng nó mà không có một dự phòng, nhưng tôi nghĩ có lẽ dành cho du khách trong tương lai nó sẽ là hữu ích.

Answer 6

của nó dễ dàng, chỉ cần quấn nó trong một hộp tương đối như sau:

<div class="relative"> 
<div class="absolute">LOGO</div> 
</div> 

Hộp tương đối có margin: 0 Auto; và, quan trọng, chiều rộng ...