在说到这个问题的时候，我们都知道，table默认文字就是垂直居中显示的，也许有人会问Div中CSS中不是有text-align属性来设置垂直居中的吗？是的，通常我们使文字垂直居中用的就是这个属性，但是在正式开发时候单单掌握这个可不够，例如：现在有一需求，在div中（未知宽高），里面内容不固定，不管是文字占1行还是多行都在div中垂直居中，那么应该怎么做？
当要被居中的元素是inline（例如span）或者inline-block（例如div/p）的时候，可以巧妙的将父级容器设置为display:table-cell，配合text-align:center和vertical-align:middle即可以实现水平垂直居中。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/199<img src=" http://www.weipxiu.com/wp-content/uploads/2017/05/G5UC9DYR54DWIX7RLE.png " alt=" " width="1052 " height="198 " class="alignnone size-full wp-image-679 " /> <head> <title> 多行文字实现垂直居中 </title> <meta http-equiv="Content-Type " content="text/html; charset=utf-8 " /> <style type="text/css"> body { font-size:12px; font-family:tahoma; } div#wrap { height:400px; display:table; } div#content { vertical-align:middle; display:table-cell; border:1px solid #FF0099; background-color:#FFCCFF; width:760px; } div#content p { text-align:center; } </style> </head> <body> <div id="wrap "> <div id="content "> <p>现在我们要使这段文字垂直居中显示</p> <p>现在我们要使这段文字垂直居中显示</p> <p>现在我们要使这段文字垂直居中显示</p> </div> </div> </body> </html> |
工作需求示例展示：
本站所有文章、图片、资源等如无特殊说明或标注，均为来自互联网或者站长原创，版权归原作者所有；仅作为个人学习、研究以及欣赏！如若本站内容侵犯了原著者的合法权益，可联系我们进行处理，邮箱：343049466@qq.com
赞(8)
打赏
下一篇：Normalize和Reset CSS及各大知名企业网站CSS代码初始化集合
