Centrer de manière verticale un élément de type bloc - tableau - HTML5 et CSS3

**friendofweb** · 21/08/2015, 19h13

Bonjour,

Comme c'est écrit dans le titre de la discussion, je voudrais centrer de manière relative un élément de type bloc, tableau.. D'après mon livre, le tableau obéit aux règles de type "bloc" pour l'extérieur du tableau et les balises interne sont de type "en ligne" (ex:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

text-align: center;

).

Donc pour l'instant, je me débrouille avec

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

margin-top: valeur;

, mais je dois chipoter pour avoir un centrage "parfais".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title>test élément de type bloc centré</title>
		<link rel="stylesheet" type="text/css" href="testcentrageverticale.css" />
	</head>
	<body>
	<div id="elementcentre">
	Box Content
	</div>
	</body>
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
#elementcentre {
	text-align: center;
	margin: auto;
	margin-top: 30%;
	width: 30%;
	padding: 20px;
	background: #eeeeee;
	border: 5px solid #2c55b7;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	}

Avez-vous une meilleure solution concernant le centrage verticale svp ?
Et au passage, j'en profite pour vous demander de me rappeler comment préciser le code (syntaxe), quand j'écris ici, je crois que c'est un truc du genre code:html, code:css, pour la coloration syntaxique..

Merci.

Invité · 21/08/2015, 23h04

Bonjour,

as-tu jeté un œil dans la FAQ CSS :

Comment centrer verticalement un élément block ?

**friendofweb** · 22/08/2015, 09h24

J'ai fait une cherche via le moteur de recherche. Je me dis que ce post peut servir à d'autres personnes.
Je jette un oeil dans la FAQ.

Merci pour la réponse.

**friendofweb** · 22/08/2015, 11h15

La réponse est intéressante, mais je cherche finalement à centrer le premier élément enfant (div) de body :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
	<body>
	<div id="elementcentre">
	Par exemple, pour la page index.htm d'un site, page d'accueil, qui aurait être un logo ou simple texte.
	</div>
	</body>

Je suis proche du résultat, voici où j'en suis :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title>test élément de type bloc centré</title>
		<link rel="stylesheet" type="text/css" href="test2centrageverticale.css" />
	</head>
	<body>
	<div id="elementcentre"><!-- correctement centré verticalement -->
	<span id="enfant">Box Content</span><!-- problème pour centrer le texte verticalement -->
	</div>
	</body>
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
 
#elementcentre {
  position: absolute;
  top: 50%; /* top = 50% pour centrage vertical */
  left: 50%; /* left = 50% pour centrage horizontal */
  width : 100px;
  height : 100px;
  margin-top: -50px; /* margin-top = - height/2 */
  margin-left: -50px; /* margin-left = - width/2 */
  border : 1px solid green;
  text-align: center;
}

Pour l'instant, je ne trouve pas.
Au fait, pour la coloration syntaxique, il faut préciser : code=xxx.

**CCyrillus** · 22/08/2015, 11h38

depuis IE8, display rend la chose aisée:
http://codepen.io/anon/pen/yNdrob

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
html {
  height:100%;
  width:100%;
  display:table;
}
body {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}

pour les plus récents, c'est encore plus simple:
http://codepen.io/anon/pen/EjBJvE

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
html {
  height:100%;
  width:100%;
  display:flex;
  justify-content:center;
  align-items:center;
}

Invité · 22/08/2015, 11h44

Bonjour,
tu n'en étais pas loin.
Sur navigateurs "anciens" :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#elementcentre {
  position: absolute;
  top: 50%; /* top = 50% pour centrage vertical */
  left: 50%; /* left = 50% pour centrage horizontal */
  width : 100px;
  height : 100px;
  margin-top: -50px; /* margin-top = - height/2 */
  margin-left: -50px; /* margin-left = - width/2 */
  border : 1px solid green;
  text-align: center;
  line-height:100px;
}
#elementcentre span {
  display:inline-block;
  vertical-align:middle;
  line-height:normal; /* on rétablit le line-height */
}

Sinon, display:table ou display:flex sont à privilégier sur les navigateurs récents.

**friendofweb** · 22/08/2015, 13h07

Merci à vous,

@ jreaux62, pour info, ta réponse est intéressante, mais si on utilise un texte long, il dépasse du cadre

J'espère que le lien suivant fonctionne pour que vous puissiez voir ce que je voulais finalement.

http://codepen.io/anon/pen/MwMRPO (j'espère que je ne suis pas sur une machine privée)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<!DOCTYPE html>
<!-- norme html5 -->
<html lang="fr">
	<head>
		<meta http-equiv ="content-type" content="text/html; charset=UTF-8" />
		<title>test élément de type bloc centré</title>
		<link rel="stylesheet" type="text/css" href="test6.css" />
	</head>
	<body>
	<div id="elementcentre">
	Par exemple, pour la page index.htm d'un site, page d'accueil, qui aurait être un logo, un simple texte ou un bloc.
	</div>
	</body>
</html>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
html {
  height:100%;
  width:100%;
  display:table;
}
body {
  display:table-cell;
  text-align:center;
  vertical-align:middle;
}
#elementcentre {
	margin: auto;
	width: 30%;
	background: #eeeeee;
	border: 5px solid #2c55b7;
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	}