html - Comment puis-je centrer verticalement le texte avec CSS

Mots clés : htmlcssvertical-alignmenthtml

meilleur 5 Réponses html - Comment puis-je centrer verticalement le texte avec CSS

vote vote

99

div {    height: 100px;    line-height: 100px;    text-align: center;    border: 2px dashed #f69c55;  }
<div>    Hello World!  </div>
div {    height: 100px;    line-height: 100px;    text-align: center;    border: 2px dashed #f69c55;  }  span {    display: inline-block;    vertical-align: middle;    line-height: normal;  }
<div>    <span>Hello World!</span>  </div>
div {    display: table;    height: 100px;    width: 100%;    text-align: center;    border: 2px dashed #f69c55;  }  span {    display: table-cell;    vertical-align: middle;  }
<div>    <span>Hello World!</span>  </div>
div {    display: flex;    justify-content: center;    align-items: center;    height: 100px;    width: 100%;    border: 2px dashed #f69c55;  }
<div>    <span>Hello World!</span>  </div>
vote vote

80

display: flex; justify-content: center; /* align horizontal */ align-items: center; /* align vertical */ 
.box {   height: 150px;   width: 400px;   background: #000;   font-size: 24px;   font-style: oblique;   color: #FFF;   text-align: center;   padding: 0 20px;   margin: 20px;   display: flex;   justify-content: center;   /* align horizontal */   align-items: center;   /* align vertical */ }
<div class="box">   Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh </div>
.box {   height: 150px;   width: 400px;   background: #000;   font-size: 24px;   font-style: oblique;   color: #FFF;   text-align: center;   padding: 0 20px;   margin: 20px;   display: flex; } .box span {   margin: auto; }
<div class="box">   <span>margin:auto on a flex item centers it both horizontally and vertically</span>  </div>
.box {   height: 150px;   width: 400px;   background: #000;   font-size: 18px;   font-style: oblique;   color: #FFF;   display: flex;   flex-direction: column;   justify-content: center;   /* vertically aligns items */   align-items: center;   /* horizontally aligns items */ } p {   margin: 5px;   }
<div class="box">   <p>     When flex-direction is column...   </p>   <p>     "justify-content: center" - vertically aligns   </p>   <p>     "align-items: center" - horizontally aligns   </p> </div>
display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-flex-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; 
vote vote

75

display: table-cell; vertical-align: middle; 
#box {    height: 90px;    width: 270px;    background: #000;    font-size: 48px;    font-style: oblique;    color: #FFF;    text-align: center;    margin-top: 20px;    margin-left: 5px;    display: table-cell;    vertical-align: middle;  }
<div id="box">    Some text  </div>
vote vote

62

.vertical-align {     position: relative;     top: 50%;     -webkit-transform: translateY(-50%);     -ms-transform: translateY(-50%);     transform: translateY(-50%); } 
@mixin vertical-align {     position: relative;     top: 50%;     -webkit-transform: translateY(-50%);     -ms-transform: translateY(-50%);     transform: translateY(-50%); } 
.class-to-center {     @include vertical-align; } 
.parent-element {     -webkit-transform-style: preserve-3d;     -moz-transform-style: preserve-3d;     transform-style: preserve-3d; } 
vote vote

53

.element {     position: relative;     top: 50%;     transform: translateY(-50%); }  

Questions similaires