要实现如图一所示的结果：
html代码如下：
<!DOCTYPE html> <html> <head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>商品管理后台首页</title> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <div class="content"> <span>这是一个测试要居中</span> <div class="box">我是div中的文字</div> </div> </body> </html>
相应的less代码
.content{ width: 500px; height: 200px; border:1px solid red; position: relative; line-height: 200px;/*让class=content父div中的文字垂直居中*/ span{ background: green; } .box{ background: yellow; float: left; width: 200px; height: 100px; line-height: 100px;/*让黄色div中的文字内容垂直居中*/ text-align: center;/*让文字水平居中*/ position: absolute; top:50%; margin-top: -50px; margin-left: 200px; } }
②使用vertical-align:middle设置在父元素中的位置，
效果图：
html代码：
<!DOCTYPE html> <html> <head lang="zh"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta charset="utf-8" /> <title>商品管理后台首页</title> <link rel="stylesheet" href="./css/index.css" /> </head> <body> <div class="content"> 我是div中的文字<div class="pox">我是子元素的文字</div> </div> </body> </html>
相应的css代码：
.content{ width: 500px; height: 200px; line-height: 200px;/*设置其文字内容垂直居中*/ border:1px solid red; .pox{ background: yellow; width: 200px; height: 70px; display: inline-block; /*一定要将div设置为inline-block*/ vertical-align: middle;/*设置该元素在父元素中的位置*/ line-height: 70px; border: 1px solid green; text-align: center; } }
化简后的核心代码：
.content{ width: 500px; height: 200px; line-height: 200px;/*设置其文字内容垂直居中*/ background:red; .pox{ height: 70px;/*给内部div设置了高度，该div才会垂直居中*/ display: inline-block; /*一定要将div设置为inline-block*/ vertical-align: middle;/*设置该元素在父元素中的位置*/ background: yellow; } }