Cách đặt bảng ở giữa div theo chiều ngang & chiều dọc

Chúng ta có thể đặt một hình ảnh làm hình nền <div>giống như sau:

<style>
    #test { 

        background-image: url(./images/grad.gif); 
        background-repeat: no-repeat;
        background-position: center center; 

        width:80%; 
        margin-left:10%; 
        height:200px; 
        background-color:blue;

    }

</style>

<div id="test"></div>

Tôi cần đặt một bảng ở giữa <div>theo chiều ngang và chiều dọc. Có một giải pháp trình duyệt chéo bằng cách sử dụng CSS?

Định tâm là một trong những vấn đề lớn nhất trong CSS. Tuy nhiên, một số thủ thuật tồn tại:

Để căn giữa bảng của bạn theo chiều ngang, bạn có thể đặt lề trái và phải thành tự động:

<style>
  #test {
    width:100%;
    height:100%;
  }
  table {
    margin: 0 auto; /* or margin: 0 auto 0 auto */
  }
</style>

Để căn giữa nó theo chiều dọc, cách duy nhất là sử dụng javascript:

var tableMarginTop = Math.round( (testHeight - tableHeight) / 2 );
$('table').css('margin-top', tableMarginTop) # with jQuery
$$('table')[0].setStyle('margin-top', tableMarginTop) # with Mootools

Không vertical-align:middlecó thể vì một bảng là một khối và không phải là một phần tử nội tuyến.

Biên tập

Đây là một trang web tổng hợp các giải pháp định tâm CSS: http://howtocenterincss.com/

Đây là những gì làm việc cho tôi:

#div {
  display: flex;
  justify-content: center;
}

#table {
  align-self: center;
}

Và điều này liên kết nó theo chiều dọc và chiều ngang.

Để định vị trung tâm theo chiều ngang, bạn có thể nói width: 50%; margin: auto;. Theo tôi biết, đó là trình duyệt chéo. Để căn chỉnh dọc bạn có thể thử vertical-align:middle;, nhưng nó chỉ có thể hoạt động liên quan đến văn bản. Nó đáng để thử mặc dù.

Chỉ cần thêm margin: 0 auto;vào của bạn table. Không cần thêm bất kỳ tài sản nào vàodiv

<div style="background-color:lightgrey">
 <table width="80%" style="margin: 0 auto; border:1px solid;text-align:center">
    <tr>
      <th>Name </th>
      <th>Country</th>
    </tr>
    <tr>
      <td>John</td>
      <td>US </td>
    </tr>
    <tr>
      <td>Bob</td>
      <td>India </td>
    </tr>
 </table>
<div>

Lưu ý: Đã thêm màu nền vào div để trực quan hóa sự liên kết của bảng với tâm của nó

Ngoài ra, nếu bạn muốn tập trung cả theo chiều ngang và chiều dọc - thay vì có thiết kế dòng chảy (trong trường hợp như vậy, các giải pháp trước đó được áp dụng) - bạn có thể làm:

1. Khai báo div chính là absolutehoặc relativeđịnh vị (tôi gọi nó content).
2. Khai báo một div bên trong, cái mà thực sự sẽ giữ bảng (tôi gọi nó wrapper).
3. Khai báo bảng chính nó, bên trong wrapperdiv.
4. Áp dụng biến đổi CSS để thay đổi "điểm đăng ký" của đối tượng trình bao bọc thành trung tâm của nó.
5. Di chuyển đối tượng bao bọc đến trung tâm của đối tượng cha.

#content {
  width: 5em;
  height: 5em;
  border: 1px solid;
  border-color: red;
  position: relative;
  }

#wrapper {
  width: 4em;
  height: 4em;
  border: 3px solid;
  border-color: black;
  position: absolute;
  left: 50%; top: 50%; /*move the object to the center of the parent object*/
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /*these 5 settings change the base (or registration) point of the wrapper object to it's own center - so we align child center with parent center*/
  }

table {
  width: 100%;
  height: 100%;
  border: 1px solid;
  border-color: yellow;
  display: inline-block;
  }

<div id="content">
    <div id="wrapper">
        <table>
        </table>
    </div>
</div>

Lưu ý: Bạn không thể thoát khỏi div trình bao bọc, vì kiểu này không hoạt động trực tiếp trên các bảng, vì vậy tôi sử dụng div để bọc và định vị nó, trong khi bảng được chảy bên trong div.

Bạn có thể căn giữa một hộp theo cả chiều dọc và chiều ngang, sử dụng kỹ thuật sau:

Các container bên ngoài:

• nên có display: table;

Các thùng chứa bên trong:

• nên có display: table-cell;
• nên có vertical-align: middle;
• nên có text-align: center;

Hộp nội dung:

• nên có display: inline-block;

Nếu bạn sử dụng kỹ thuật này, chỉ cần thêm bảng của bạn (cùng với bất kỳ nội dung nào bạn muốn đi cùng với nó) vào hộp nội dung.

Bản giới thiệu :

body {
    margin : 0;
}

.outer-container {
    position : absolute;
    display: table;
    width: 100%;
    height: 100%;
    background: #ccc;
}

.inner-container {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.centered-content {
    display: inline-block;
    background: #fff;
    padding : 20px;
    border : 1px solid #000;
}

<div class="outer-container">
   <div class="inner-container">
     <div class="centered-content">
        <em>Data :</em>
        <table>
            <tr>
                <th>Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Tom</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Anne</td>
                <td>15</td>
            </tr>
            <tr>
                <td>Gina</td>
                <td>34</td>
            </tr>
        </table>
     </div>
   </div>
</div>

Xem thêm Fiddle này !

Tôi phát hiện ra rằng tôi phải bao gồm

body { width:100%; }

cho "lề: 0 tự động" để làm việc cho các bảng.