html 柔性未知高度垂直居中写法
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了html 柔性未知高度垂直居中写法相关的知识,希望对你有一定的参考价值。
<!DOCTYPE html>
<html lang="zh-CN" class="fullscreen">
<head>
<title>flex未知高度垂直居中写法</title>
<style>
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
}
.wrap {
/* ie10 */
display: -ms-flexbox;
-ms-flex-align: center;
/* android */
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
/* chrome、 iOS */
display: -webkit-flex;
display: flex;
-webkit-align-items: center;
align-items: center;
-webkit-justify-content: center;
justify-content: center;
width: 100%;
height: 100%;
}
.content {
width: 100%;
background-color: #f90;
height: 100px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="content">
content
</div>
</div>
</body>
</html>
以上是关于html 柔性未知高度垂直居中写法的主要内容,如果未能解决你的问题,请参考以下文章
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
css实现ie6以上文字高度未知垂直居中
以未知高度居中响应 div 并启用完全垂直滚动
当高度未知时使用 flexbox 垂直居中时出现问题
垂直居中未知高度
关于未知高度的垂直居中