1.如果是单行文本。(子元素是块级元素，则设置子元素的line-height等于父元素的高，可使子元素垂直居中与父元素)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ 500px; height: 500px; background: gray; } #wrapper p{ line-height: 500px;//行高=父级的height，垂直居中。半行间距上下为250px text-align: center;//水平居中 } </style> </head> <body> <div id="wrapper"> <p>这是一段要垂直水平居中的文字！</p> </div> </body> </html>
2、对于已知高度的块级子元素，子元素采用绝对定位，{position: absolute;top:50%; height: 300px; margin-top: -150px;}
另一种的绝对定位：子元素不管是块级，行内。未知高度的子元素，设置子元素{ position: absolute;top:50%;left:50%;100%;
transform:translate(-50%,-50%);text-align: center;}
translate:移动，transform的一个方法
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数：
用法transform: translate(50px, 100px);
适用：绝对定位为页面布局没有影响的情况下可以使用，并且子级的高度是已知的
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ position: relative;//父级 500px; height: 500px; background: gray; } #wrapper p{ position: absolute;//子级用绝对定位 top:50%;//先定位到50%的位置 height: 300px;//已知的高度 margin-top: -150px;//往上提本身高度的一半 } </style> </head> <body> <div id="wrapper"> <p>这是一段要垂直水平居中的文字！这是一段要垂直水平居中的文字！</p> </div> </body> </html>
3、对于已知块级子级元素的高度，而且不能用绝对定位来布局的情况，（利用一个空的div让其width为100%，高度为父元素的50%。适用：对于绝对布局有影响，不能适用position:absolute的元素，可以用以下这种方法。思路是：用一个块级元素，设置已知大小，在让其高度达到父级容器的一半大小，再把要居中的元素往上提半个高度。跟方法2同理。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ background: gray; 500px; height: 500px; text-align: center; overflow: hidden; } #null{//利用一个空的div让其width为100%，高度父元素的50% 100%; height: 50%; background: yellow; } #content { height: 100px; margin: -50px; } </style> </head> <body> <div id="wrapper"> <div id="null"></div> <div id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧中吧~</div> </div> </body> </html>
5.在不管子元素是（行内，或者块级）子元素未知高度的情况下，父级元素使用
{display: table-cell;
vertical-align: middle;
text-align: center;
}
或者父级使用{
display：table；
}
子级使用
{text-align: center;
display: table-cell;
vertical-align: middle;}
又或者使用父级使用 flex布局
{display: flex;
justify-content:center;（所有的行作为一个整体，在主轴上的排列方式为居中）
align-items:Center;}当只有单行时，align-content失效，align-items设置为center，items彼此之间的对齐方式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ background: gray; 500px; height: 500px; text-align: center; display: table-cell; vertical-align: middle; } #content {} </style> </head> <body> <div id="wrapper"> <span id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</span> </div> </body> </html> 或者父级使用：display: table;子级使用display: table-cell; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #wrapper{ background: gray; 500px; height: 500px; display: table; } #content {text-align: center; display: table-cell; vertical-align: middle;} </style> </head> <body> <div id="wrapper"> <span id="content">居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~居中吧~</span> </div> </body> </html>