Вертикальное центрирование HTML-таблицы

Ниже приведен код, который я сделал для простой таблицы html. Моя цель - центрировать всю таблицу вертикально в центре страницы на основе высоты пользователя устройства. Я попытался сделать div с высотой 100% и шириной как 100%, и поставил таблицу на 50% сверху и слева и не повезло. Есть идеи?Вертикальное центрирование HTML-таблицы

body { 
 
    background-color: #a00000; 
 
} 
 
table { 
 
    margin: 50px auto 25px auto; 
 
    padding: 0px; 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
} 
 
td { 
 
    background-color: #fff; 
 
    padding: 10px; 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
} 
 
img { 
 
    max-width: 120px; 
 
    max-height: 120px; 
 
    border: solid 5px #a00000; 
 
    border-radius: 5px; 
 
    background-color: #a00000; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Bobcat Menu</title> 
 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
 
     <link rel="stylesheet" href="css/style.css"> 
 
    </head> 
 
    <body> 
 
     <table align="center"> 
 
      <tr> 
 
       <td> 
 
        <a href="mobincube://action/section/DropDay"> 
 
         <img src=" 
 
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" /> 
 
        </a> 
 
       </td> 
 
       <td> 
 
        <a href="mobincube://action/section/Schedule"> 
 
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" /> 
 
        </a> 
 
       </td>  
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <a href="mobincube://action/section/Calculators"> 
 
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" /> 
 
        </a> 
 
       </td> 
 
       <td> 
 
        <a href="mobincube://action/section/News"> 
 
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" /> 
 
        </a> 
 
       </td>  
 
      </tr>  
 
     </table> 
 
    </body> 
 
</html>

источник

2016-12-29 Anonymous

OMG. Есть тонн zillions дублированных постов в stackoverflow .... и многое другое по интернету. –

Лично мне нравится это решение: http://stackoverflow.com/a/27532367/5035890 bulletproof! –

Вы можете использовать flexbox для достижения результата, который вы ищете.

Установить как тело & HTML для height: 100%;
Wrap стол с оберточной DIV и использования:
```
.wrapper { 
    display: flex; 
    height: 100%; 
} 
```
набор полей таблицы в margin: auto;

Это обеспечит вашу вкладку e всегда идеально по центру.

body, html { 
 
    height: 100%; 
 
} 
 
body { 
 
    background-color: #a00000; 
 
    margin: 0; /* remove default margins added by browsers */ 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    height: 100%; 
 
} 
 
table { 
 
    margin: auto; 
 
    padding: 0px; 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
} 
 
td { 
 
    background-color: #fff; 
 
    padding: 10px; 
 
    background-color: #fff; 
 
    border-radius: 10px; 
 
} 
 
img { 
 
    max-width: 120px; 
 
    max-height: 120px; 
 
    border: solid 5px #a00000; 
 
    border-radius: 5px; 
 
    background-color: #a00000; 
 
}

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <meta charset="UTF-8"> 
 
     <title>Bobcat Menu</title> 
 
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' /> 
 
     <link rel="stylesheet" href="css/style.css"> 
 
    </head> 
 
    <body> 
 
     <div class="wrapper"> 
 
     <table align="center"> 
 
      <tr> 
 
       <td> 
 
        <a href="mobincube://action/section/DropDay"> 
 
         <img src=" 
 
https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/D.png" /> 
 
        </a> 
 
       </td> 
 
       <td> 
 
        <a href="mobincube://action/section/Schedule"> 
 
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/S.png" /> 
 
        </a> 
 
       </td>  
 
      </tr> 
 
      <tr> 
 
       <td> 
 
        <a href="mobincube://action/section/Calculators"> 
 
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/C.png" /> 
 
        </a> 
 
       </td> 
 
       <td> 
 
        <a href="mobincube://action/section/News"> 
 
         <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/837604/N.png" /> 
 
        </a> 
 
       </td>  
 
      </tr>  
 
     </table> 
 
     </div> 
 
    </body> 
 
</html>

источник

2016-12-29 17:26:52 Axel

display: table-cell; Добавить это на родительский DIV, а затем использовать vrtical-align на самой таблице.

html: 
<div id="parent"> 
    <div id="child">Content here</div> 
</div> 

css: 
#parent {display: table} 

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

источник

2016-12-29 17:22:47 coderredoc

Попробуйте добавить следующие правила CSS для table элемента:

table{ 
    /* ... */ 
    position: absolute; 
    top: 50%; 
    transform: translateY(-50%); 
}

источник

2016-12-29 17:25:44

Я считаю, что вы можете сделать что-то вроде этого, чтобы получить себе центрирован на любой браузер.

table { 
    margin: 50px auto 25px auto; 
    padding: 0px; 
    background-color: #fff; 
    border-radius: 10px; 
    position: relative; 
    top: 50%; 
    transform: translateY(50%); 
}

https://jsfiddle.net/rodhartzell/s6x5toj9/

источник

2016-12-29 17:29:31

Вертикальное центрирование HTML-таблицы

ответ

Смежные вопросы