Centrar Horizontalmente y Verticalmente usando CSS es difícil, por eso a continuación hay un pequeño ejemplo (comentado) que puede ser usado como referencia.
EJEMPLO (DOCUMENTADO en Inglés)
Esto funciona en:
Centering Vertically and Horizontally in HTML using CSS is a pain, so here’s a litte example (self commented) that can be used as a reference.
This works for:
While working with José ABCD (that’s not his last name… he likes to remain unknown) we were talking about two ways of solving a problem un PHP and which would be the best in terms of speed. To solve this, we decided to use microtime(). This is what we did:
Code
$cicles = 5000; // Number of cicles
$totalTime = 0; // Total time, set to 0
for ($i=0; $i<$cicles; $i++){ // This for gets run for $cicles times
$timeInit = microtime(); // Initial time
## código a probar aquí ## // This is the code to test, it can be a function or several lines of code
$timeEnd = microtime(); // End time
// Next we process time to get a total amout of time during all $cicles
$timeInit = explode(" ", $timeInit);
$timeInit = (double) $timeInit[0] + $timeInit[1];
$timeEnd = explode(" ", $timeEnd);
$timeEnd = (double) $timeEnd[0] + $timeEnd[1];
$totalTime += ($timeEnd - $timeInit);
}
$timeAvg = $totalTime / $cicles; // Average time
// We print our results
echo "<div>";
echo "Total = ".$totalTime."<br>";
echo "Avg = ".$timeAvg."<br>--<br>";
echo "</div>";
Con José ABCD (no es su apellido real… le gusta el anonimato) estábamos conversando sobre dos formas de solucionar un problema en PHP y cuál sería más eficiente. Para resolver el problema, decidimos usar microtime(). Lo que hicimos a continuación con un ejemplo:
Code
$cicles = 5000; // Cantidad de ciclos
$totalTime = 0; // Tiempo total, inicialmente 0
for ($i=0; $i<$cicles; $i++){ // Este for es ejecutado $cicles veces
$timeInit = microtime(); // Tiempo inicial
## código a probar aquí ## // Este es el código a probar, puede ser una función o varias líneas de código
$timeEnd = microtime(); // Tiempo final
// Se procesa el tiempo para obtener el total durante todos los ¢cicles
$timeInit = explode(" ", $timeInit);
$timeInit = (double) $timeInit[0] + $timeInit[1];
$timeEnd = explode(" ", $timeEnd);
$timeEnd = (double) $timeEnd[0] + $timeEnd[1];
$totalTime += ($timeEnd - $timeInit);
}
$timeAvg = $totalTime / $cicles; // Average time
// Se muestran los resultados
echo "<div>";
echo "Total = ".$totalTime."<br>";
echo "Avg = ".$timeAvg."<br>--<br>";
echo "</div>";
Next a correct XHTML example that validates. I wrote it to have a way to remember how it should be built and avoid searching for the same stuff every time.
<?xml version="1.0" encoding="UTF-8"?>
<!-- This is a comment -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
The "Strict" part can be:
-Strict, meaning all look should be accomplished by CSS
-Transitional, meaning some HTML4 elements are allowed, like align="center"
-Frameset, allowing frames
To know more:
http://w3schools.com/xhtml/xhtml_dtd.asp
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Title</title>
<!-- meta -->
<meta name="description" content="An example page" />
<meta name="keywords" content="example, page, xhtml" />
<meta name="author" content="Iam Me" />
<!-- About meta: http://w3schools.com/tags/tag_meta.asp -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- External file Script -->
<script type="text/javascript" src="main.js"></script>
<!-- Local Script -->
<script type="text/javascript">
//<![CDATA[
alert("This is an Alert! Inside <head>.");
//]]>
</script>
<!-- css -->
<!-- <style> not allowed in <body> -->
<!-- External file CSS -->
<link rel="stylesheet" href="look.css" type="text/css" />
<!-- Local CSS -->
<style type="text/css">
h1 {
color: #fa6;
}
</style>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
alert("This is an Alert! Inside <body>.");
//]]>
</script>
<!-- noscript:
to work it has to be inside one of the following tags:
"p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del".
These tags are "display: block" (css).
-->
<noscript><h1>This doesN'T appear on a browser with JavaScript active</h1></noscript>
<h2>An h2 example</h2>
<p><abbr title="Extensible HyperText Markup Language">XHTML</abbr></p>
</body>
</html>
A continuación un ejemplo de XHTML correcto y que valida. Lo escribí como una manera de ayudarme a recordar como debe estar compuesto y evitar buscar más veces lo mismo.
<?xml version="1.0" encoding="UTF-8"?>
<!-- Esto es un Comentario -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
La parte que dice "Strict" puede ser:
-Strict, significa que la parte estética debe ser hecha con CSS
-Transitional, permite usar elementos de HTML4 como align="center"
-Frameset, permite el uso de frames
Para saber más ver:
http://w3schools.com/xhtml/xhtml_dtd.asp
-->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<title>Titulo</title>
<!-- meta -->
<meta name="description" content="Una página de ejemplo" />
<meta name="keywords" content="ejemplo,pagina,html,test" />
<meta name="author" content="Yo Ego" />
<!-- sobre meta: http://w3schools.com/tags/tag_meta.asp -->
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- Script en archivo externo -->
<script type="text/javascript" src="main.js"></script>
<!-- Script local -->
<script type="text/javascript">
//<![CDATA[
alert("Esto es un alerta! Adentro de <head>.");
//]]>
</script>
<!-- css -->
<!-- <style> no permitido en <body> -->
<!-- CSS en archivo externo -->
<link rel="stylesheet" href="look.css" type="text/css" />
<!-- CSS local -->
<style type="text/css">
h1 {
color: #fa6;
}
</style>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
alert("Esto es una alerta! Adentro de <body>.");
//]]>
</script>
<!-- noscript:
para funcionar tiene que tener adentro uno de los siguientes tags:
"p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del".
Estos tags son elementos "display: block".
-->
<noscript><h1>Esto NO aparece en un browser con javascript activo</h1></noscript>
<h2>Una prueba de h1</h2>
<p><abbr title="Extensible HyperText Markup Language">XHTML</abbr></p>
</body>
</html>