我们都知道,固定高宽的div在网页中垂直居中很简单,相信大家也很容易的写出来,但是不是固定高宽的div如何垂直居中呢?我们在网页布局,特别是手机等web端网页经常是不固定高宽的div,那么这些div如何垂直居中呢?这篇文章,我总结一下。
实现文本居中
最简单的方法:
.out{
/*使用 height 与 line-height 高度一样ss 实现居中*/
height: 700px;
line-height: 700px;
text-align: center;
}
第二种文本居中:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>居中方法</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> .out { width: 700px; height: 700px; margin: auto; border: 1px solid; /*使用 display的 flex 实现居中*/ display: flex; justify-content: center; align-items: center; } .li { width: 200px; height: 100px; background-color: yellow; border: 1px solid; /*使用 display的 flex 实现文本 居中*/ /* display:flex; justify-content:center; align-items:center*/ /*vertical-align对一些特定显示样式 (例如单元格显示方式:table-cell)的元素才会起作用。 所以要实现上下垂直居中对齐,可以采用如下样式*/ display: table-cell; /*按照单元格的样式显示元素*/ vertical-align: middle; /*垂直居中对齐*/ text-align: center; /*水平居中对齐*/ } </style> </head> <body> <div class="out"> <!-- 外部居中-测试 --> <div class="li"> <p class="li">文本居中</p> </div> </div> </body> </html>
实现div等居中
第一种方法:
固定高宽div垂直居中
如上图,固定高宽的很简单,写法如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>居中方法</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> .out { width: 700px; height: 700px; margin: auto; border: 1px solid; position: relative; } .li { width: 200px; height: 100px; background-color: yellow; border: 1px solid; text-align: center; /*加上下面3句话,可以居中*/ /* margin: auto; position: absolute; top: 0;left: 0;right: 0; bottom: 0; */ position: absolute; top: 50%; left: 50%; margin-left:-100px; margin-top:-50px; } </style> </head> <body> <div class="out"> 外部居中-测试 <div class="li"> <p class="pcss">文本居中</p> </div> </div> </body> </html>
第二种方法;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>居中方法</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style type="text/css"> .out { width: 700px; height: 700px; margin: auto; border: 1px solid; /*使用 display的 flex 实现居中*/ display:flex; justify-content:center; align-items:center; } .li { width: 200px; height: 100px; background-color: yellow; border: 1px solid; } </style> </head> <body> <div class="out"> <!-- 外部居中-测试 --> <div class="li"> <p class="li">文本居中</p> </div> </div> </body> </html>