CSS篇之3. 如何保持浮层水平垂直居中

垂直水平居中是日常前端开发当中一个常见的需求，在支持 CSS3 属性的现代浏览器当中，有一个利用 CSS3 属性的垂直水平居中方法：

   .center {position: absolute;top: 50%;left: 50%;-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%); }

上面的例子，无论我们怎样调整窗口的大小，红色方块始终会在窗口垂直、水平居中。

原理
为了解释原理，我们创建两个元素:

  <div id="outer"><div id="inner"></div></div>

先不加上 transform 属性：

  #outer {position: relative;width: 500px;height: 500px;border: 2px solid yellow;}#inner {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;background-color: red;}

可以看到红色方块左、上方距离外层方块的距离都是250个像素，如果我们想实现垂直水平居中，就应该将红色方块的中心点移动到目前元素左上角的位置，也就是分别向上和向左移动一半方块边长的长度，50个像素。

     #inner {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;background-color: red;-ms-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);}

水平垂直居中实现代码

.parent {width: 200px;height: 200px;background-color: black;
}
.child {position: relative;height: 100px;width: 100px;top: 50%;left: 50%;background-color:red;  -webkit-transform: translate(-50%, -50%) ;-moz-transform: translate(-50%, -50%) ;-ms-transform: translate(-50%, -50%) ;-o-transform: translate(-50%, -50%) ;transform: translate(-50%, -50%) ;}

以往，弹出层水平垂直居中我们往往用js实现，现在可以用css3来完成了。而且用这种方法弹出层不需要设置高度，很方便。

CSS篇之3. 如何保持浮层水平垂直居中相关推荐

如何在 CSS 中设置组件在浏览器屏幕水平垂直居中
如何在 CSS 中设置组件在浏览器屏幕水平垂直居中在 CSS 中设置组件在浏览器屏幕水平垂直居中可分解为两个问题,一是设置组件在其父组件的水平垂直居中,二是让其父组件铺满整个屏幕. 对于让最 ...
【面试题】CSS 中几种最常用的水平垂直居中的方法
目录 CSS 中几种最常用的水平垂直居中的方法一.使用 margin:auto 二.使用 position:absolute 三.使用弹性布局四.文本水平对齐和行高五.使用网格布局 CSS 中几 ...
浮层java_css保持浮层水平垂直居中的四种方法
以以上代码为例: 1,flex方法 .parent{ position: absolute; background-color: #eee; width: 100%; height: 100%; } ...
CSS使微信小程序 view文字水平垂直居中
text-align: center; display: flex; align-items: center; justify-content: center;
CSS实现元素水平垂直居中的各种方法
关于 CSS 如何将元素进行水平垂直居中的几种常用方法前言在设计网页页面的过程中,总会有将元素或者文字进行水平或者垂直居中的要求,各种CSS样式调整,搞的头都大了.这里将会介绍 CSS 中几种常用 ...
css图片在盒子里居中,让图片在div盒子中水平垂直居中
//调整多张图片,让图片水平垂直居中 function adjustImg(){ let imgDiv = document.getElementsByClassName("img" ...
移动端 h5开发相关内容总结——CSS篇
1.移动端开发视窗口的添加 h5端开发下面这段话是必须配置的 <meta name="viewport" content="width=device-width, ...
CSS布局之-水平垂直居中
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法. 另外,文中的css都是用less书写的,如果看不懂less,可以把我给 ...
前端计划——面试题总结-CSS篇
前端面试之CSS篇 1.三种基本引入方式外部样式表 <link rel="stylesheet" type="text/css" href=" ...

CSS篇之3. 如何保持浮层水平垂直居中

CSS篇之3. 如何保持浮层水平垂直居中相关推荐

最新文章

热门文章