CSS实现div盒子水平垂直居中的方式

网上看到有很多方式，这里记录一下我用起来顺手的几种方式，这里敲黑板做笔记，哈哈~~

<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~~~方法还有很多种，以上是我熟悉的，后面碰到别的情况再做记录。

CSS实现div盒子水平垂直居中的方式相关推荐

HTML5/CSS3基础——div盒子水平垂直居中的三种方案
HTML5/CSS3基础--div盒子水平垂直居中的三种方案一.基于定位的使div盒子水平居中的三种方式 1.使用top:50% left:50% 以及margin-top 和 margin-lef ...
css设置子盒子水平垂直居中（四种方式）
css设置子盒子水平垂直居中(四种方式) 1. 使用绝对定位 <!DOCTYPE html> <html><head><meta charset=" ...
文字居中、CSS中实现盒子水平垂直居中的方法
1. 文字居中: 第一种方式: 当用text-align:center时,达到的是水平居中的效果,那再用vertical-align:middle:其实是实现不了垂直居中的,此时就需要用到displa ...
css实现文字或者div盒子水平垂直居中的方法
实现水平垂直居中的方法文本(文字)内容属于行内元素行内元素水平垂直居中方法方式一: 设置文字外层的盒子 text-align:center /*水平居中*/ height = 100px; /* ...
HTML/CSS 变形（盒子水平垂直居中）、过渡、动画（学习整理）
变形 transform:scale(*) >1放大 0-1缩小 <1基于中心点对称 transform:rotate(?deg) deg(度数) 正值-顺时针旋转负值-逆时针旋转 tr ...
div盒子水平垂直居中的几种方式
1. div水平居中 div{width:100px;height:100px;margin:0 auto; } 2. div水平垂直居中这里要有两层或者给body设置高度100vh,然后给元素设置 ...
如何实现div盒子水平垂直居中
关于如何使一个小盒子在大盒子中水平垂直居中有很多方法,下面将列举常用的几种: ###html 代码 <div class="parent"><div class= ...
div盒子水平垂直居中的方法
一.盒子没有固定的宽和高方案1.Transforms 变形这是最简单的方法,不仅能实现绝对居中同样的效果,也支持联合可变高度方式使用.内容块定义transform: translate(-50%, ...
css --- [小结]让盒子水平垂直居中的解决方案
描述有如下模型,想办法让 <style>.box{width: 500px;height: 500px;background: skyblue;} </style> < ...

CSS实现div盒子水平垂直居中的方式

CSS实现div盒子水平垂直居中的方式相关推荐

最新文章

热门文章