网上看到有很多方式,这里记录一下我用起来顺手的几种方式,这里敲黑板做笔记,哈哈~~
<div id='container'><div class='middle'></div></div>
首先预备工作,假设这是登录界面,那通常会涉及到背景图片撑满屏幕
<style>html,body{height:100%;}#container{width:100%;height:100%;position:fixed;top:0;left:0;background-color: aqua; //这里用背景色充当背景图片}</style>
明显看到会出现滚动条;可以用两种方式让滚动条消失:
html,body{height:100%;/* overflow: hidden; */ //方式一margin:0;padding: 0;}
好啦下面,开始进入正题,实现 class=‘middle’ 这个div盒子的垂直居中显示
1.前提是设置好div盒子的高度和宽度
.middle{width:100px;height:100px; background-color:tomato;/* 水平居中 */margin: 0 auto;}
(1) position:absolute
方式一:元素自身已知宽度
.middle{width:100px;height:100px; background-color:tomato;/* 水平垂直居中*/position: absolute;top:50%;left:50%; margin: -50px 0 0 -50px;}
方式二:元素自身未知宽度
.middle{width:100px;height:100px; background-color:tomato;/* 水平垂直居中*/position: absolute;top:50%;left:50%; transform: translate(-50%,-50%);}
方式三:
.middle{width:100px;height:100px; background-color:tomato;/* 水平垂直居中*/position: absolute; top:0;left:0;right:0;bottom:0;margin:auto;}
(2)display:flex
方式一:
#container{width:100%;height: 100%;/* 子元素middle垂直居中 */display: flex;justify-content: center; // 水平居中align-items:center;// 垂直居中}
方式二:
#container{width:100%;height: 100%;display: flex;}.middle{width:100px;height:100px; background-color:tomato;margin:auto;}
(3)display:table;display:table-cell;display:inline-block;
<div id='container'><div class='middle'><div class='inner'></div></div></div>
#container{width:100%;height: 100%;display: table;}.middle{width:100px;height:100px; background-color:tomato;/* 这边会发现 middle 的背景色会铺满整个屏幕 */display:table-cell;vertical-align: middle;text-align: center; }.inner{width:50px;height:50px;background-color: yellow;/* 实现水平垂直居中*/display: inline-block;}
OK~~~方法还有很多种,以上是我熟悉的,后面碰到别的情况再做记录。