¿Cómo poner una tabla en el centro de la página usando CSS?

81

Estoy usando el siguiente código. ¿Cómo poner esta tabla en el centro de la página usando CSS?

<html>
    <head>
        <link rel="stylesheet" type="text/css" href="styles.css" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>The Main Page</title>
    </head>
    <body>
        <table>
            <tr>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
                <td><button class="lightSquare"></button></td>
                <td><button class="darkSquare"></button></td>
            </tr>
        </table>
    </body>
</html>
html css html-table center Código Azul
fuente
1
Duplicado de muchas otras preguntas, por ejemplo, stackoverflow.com/questions/2281087/center-a-div-in-css
jacktheripper
4
centrado horizontalmente? centrado verticalmente? ¿ambos?
Marc B
Tanto horizontal como verticalmente
CodeBlue
1
posible duplicado de div alinear verticalmente (sin tablas)
JonH

Respuestas:

106 
html, body {
    width: 100%;
}
table {
    margin: 0 auto;
}

Ejemplo JSFiddle

La alineación vertical de elementos de bloque no es lo más trivial. Algunos métodos a continuación.

Michael Robinson
fuente
Oye, pero esto solo lo centró horizontalmente y no verticalmente. Además, ¿qué es margin: 0 auto?
CodeBlue
@CodeBlue - luego vea esto: stackoverflow.com/questions/1909753/…
JonH
31

Puede intentar usar el siguiente CSS:

table {
    margin: 0 auto;            
}​
DarkAjax
fuente
9
Se puede ahorrar algo de ancho de banda quitando px.
Stephan
11

1) Configurar la alineación horizontal en automática en CSS

margin-left: auto; margin-right: auto;

2) Obtenga una alineación vertical al centro de la página y agregue lo siguiente a css

html, body { width: 100%; }

Por ejemplo :

<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}

html, body {
    width: 100%;
}

</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
        <tr>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
            <td><button class="lightSquare"></button></td>
            <td><button class="darkSquare"></button></td>
        </tr>
</table>

</body>
</html>
Gopal00005
fuente
Estaba atrapado en la misma situación debido a conflictos de HTML4 y HTML5 y alignment="centre"era absoluto en HTML5.
Gopal00005
8 
<html>
<head>
<meta charset="ISO-8859-1">
<style type="text/css">
 table.center {
    margin-left: auto;
    margin-right: auto;
}
</style>
<title>Table with css</title>
</head>
<body>
<table class="center">
  <tr>
    <th>SNO</th>
    <th>Address</th>
  </tr>
  <tr>
    <td>1</td>
    <td>yazali</td>
  </tr>
</table>

</body>
</html>
usuario2645333
fuente
2

Si preguntaba por la mesa para completar el centro, como algo en el centro total, puede aplicar el siguiente código.

margin: 0px auto;
margin-top: 13%;

este código en css le permitirá poner su tabla como flotante. Dime si te ayuda.

Alok Rajasukumaran
fuente
-1

simplemente póngalo en el div y luego controle ese div con css:

<div class="your_position">
  <table>
  </table>
</div>
mohsen solhnia
fuente