元素和文本的居中在css中是入门的考察点。元素在盒子内部水平居中或者垂直居中,文本在盒子内部水平居中或者垂直居中都是很关键的考察点。加上移动端和PC端适配,就是基本的CSS考察点。在面试过程中这个是一个最基本的问题,需要每时每刻熟练记忆。好了,下面上代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .main { width: 500px; height: 500px; background-color: greenyellow; display: flex; justify-content: center; align-items: center; /* 块级元素水平垂直居中 */ } .center { width: 100px; background-color: lightblue; height: 100px; line-height: 100px; text-align: center; /* 文本垂直居中 */ /* margin: 0 auto; */ /* vertical-align: center; */ } </style> </head> <body> <div class="main"> <div class="center"> 文字居中 </div> </div> </body> </html>
这个图片就是基本的实现效果。小盒子在大盒子内部水平居中垂直居中,文本在小盒子内部水平居中垂直居中。