CSS dọc và ngang thực tế Div

Làm cách nào để tạo trình duyệt chéo CSS trung tâm thực sự, ví dụ để sử dụng trong trang giữ?CSS dọc và ngang thực tế Div

Tôi đã thử mẹo css 2007 - How To Center an Object Exactly In The Center nhưng như bạn có thể thấy từ số JSFiddle của mã không phải là trung tâm 100%.

HTML:

<div class="center"> 
    <p>Text</p> 
</div>

CSS:

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

Nguồn

2013-01-07 Jess McKenzie

Tại sao 'lề: 0 tự động' không đủ tốt? – meagar

@meagar: Điều đó chỉ xoay quanh chiều ngang chứ không phải theo chiều dọc. – icktoofay

Ah. Câu hỏi thực sự chỉ ra rằng ý định là * các phần tử trung tâm * theo chiều dọc. – meagar

kỹ thuật đó đòi hỏi yếu tố để có một chiều rộng cố định và chiều cao. Bạn không đặt chiều rộng và chiều cao. Dựa trên biên giới và lề của bạn, để căn giữa nó, chiều rộng sẽ cần phải là 190 pixel và chiều cao sẽ cần phải là 90 pixel. Sử dụng line-height và text-align kết hợp với chiều rộng cố định và chiều cao làm cho văn bản và đường viền được căn giữa. Try it.

CSS

.center{ 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    width: 190px; 
    height: 90px; 
    line-height: 90px; 
    text-align: center; 
    margin-top: -50px; 
    margin-left: -100px; 
    border:5px solid black; 
}

Nguồn

2013-01-07 03:53:19 icktoofay

<div style='position:absolute; left:50%; top:50%; margin-left:(-)width_of_your_element/2px; margin-top:(-)height_of_your_element/2px'>

ví dụ

<!DOCTYPE html> 
<html> 
<body> 
<div style='border:1px solid; width:200px; height:200px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-100px'>hallo</div> 
</body> 
</html>

Nguồn

2013-01-07 03:54:35 derWilly

Đây là những gì tôi đã làm

<html> 
<head> 
    <title>Page Title</title> 

    <style> 
     .center { margin:auto; width:500px; background-color:green; } 
    </style> 
</head> 
<body> 
    <div class="center"> 
     <p>Help me please</p> 
    </div> 
</body> 
</html>

Hy vọng điều này sẽ giúp.

Nguồn

2013-01-07 03:57:51

Bạn có thể làm điều đó với CSS tinh khiết:

html { 
    width: 100%; 
    height: 100%; 
} 
body { 
    min-width: 100%; 
    min-height: 100%; 
} 
div.centeredBlueBox { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
    margin: auto; 
    width: 300px; 
    height: 200px; 
    background-color: blue; 
}

Điều quan trọng là để cho bê tông (ví dụ: 300px) và không có nguồn gốc (như: auto hoặc 30%) giá trị cho width và height.

Nguồn

2013-01-20 09:35:41

Tôi nghĩ, điều này hoạt động tốt nhất. Nó vẫn hoạt động với thay đổi kích thước nội dung, mà không cần phải tính toán lại các kích thước khác – BananaAcid

Đó là giải pháp của tôi:

<div style="position: absolute; left: 50%; height: 100%;"> 
    <div style="position: relative; left: -50%; display: table; height: 100%;"> 
     <div style="display: table-cell; vertical-align: middle;"> 
      //your content here 
     </div> 
    </div> 
</div>

Nó hoạt động trong rất nhiều trình duyệt. Và không có vấn đề gì với nội dung được thêm sau khi bố cục.

Nguồn

2013-07-24 08:15:13 AKonst

Đây là ví dụ bổ sung với trình thiết lập chiều cao mà tôi đã tạo cho căn chỉnh theo chiều dọc của IE. Khoảng phụ có một căn chỉnh dọc: giữa.

<style type="text/css"> 
    html, body { 
     margin: 0; 
     padding: 0; 
     overflow:hidden; 
     text-align:center; 
    } 
    html, body{ 
     height: 100%; 
    } 
    #loginContainer { 
     margin: 0 auto; 
     display: table; 
     min-width:300px; 
     text-align:left; 
     height: 85%; /* vertical align not exact in the middle */ 
    } 
    #loginContainer .label{ 
     width: 25%; 
     float:left; 
     white-space:nowrap; 
     line-height:20px; 
    } 
    #loginContainer h2{ 
     border-bottom:2px solid #B4C3E1; 
     border-width:0 0 3px; 
     padding:2px 4px; 
    } 
    .mainHeader { 
     position:absolute; 
     top:0; 
     left:0; 
     text-align:center; 
     width:100%; 
     font-size:2em; 
     white-space:nowrap; 
    } 
    .detailsText { 
     border-top:1px solid #F60; 
     margin-top:5px; 
     clear:both; 
    } 
    /* layout horizontal and vertical */ 
    .horizontalBox { 
     display: table-cell; 
     vertical-align: middle; /* not seen by IE6-7 */ 
     height: 100%; 
     white-space: nowrap; 
    } 
    .verticalBox { 
     padding: 55px 0 0 0; /* 55px height of logo */ 
    } 
    .rightText { 
     text-align:right; 
    } 
</style> 
<!--[if lte IE 8]> 
<style type="text/css"> 
    #loginContainer { 
     width:300px; /* minimum width */ 
    } 
    .horizontalBox { 
     text-align: center; 
    } 
    .verticalBox, .heightSetter { 
     display: inline-block; 
     vertical-align: middle; 
     text-align: left; 
     zoom:1; 
    } 
    .heightSetter { 
     height: 100%; 
    } 
    .verticalBox { 
     display: inline; 
     height: 0; 
    } 
    .heightSetter { 
     width: 1px; 
    } 
</style>  
<![endif]--> 
<div class="mainHeader">This is the Header content</div> 
<div id="loginContainer"> 
    <div class="horizontalBox"> 
     <div class="verticalBox"> 
      <h2>My header of the vertical box</h2> 
      <p>My Content</p> 
     </div> 
     <span class="heightSetter"></span> 
    </div> 
</div>

Nguồn

2013-08-14 20:38:29

Có một cái nhìn tại this; một bài báo khá thông minh.

Nguồn

2013-12-23 23:57:31

Đặt loại display của DIV thành table-cell. Sau đó, bạn có thể sử dụng bình thường vertical-align, giống như một yếu tố TD.

<div style="display: table-cell; vertical-align: middle; height: 200px;"> 
Centered Text 
</div>

Nguồn

2014-03-20 00:59:43 kpruner

Trả lời

Các vấn đề liên quan