垂直居中

如何让DIV水平和垂直居中

由 我的梦境 提交于 2019-12-02 06:45:23
我们在设计页面的时候，经常要把DIV居中显示，而且是相对页面窗口水平和垂直方向居中显示，如让登录窗口居中显示。我们传统解决的办法是用纯CSS来让DIV居中。在本文中，我将给大家讲述如何用CSS和jQuery两种方法让DIV水平和垂直居中。 CSS让DIV水平居中 说明，本文中所指的DIV包括HTML页面中所有的元素。 让一个DIV水平居中，直接用CSS就可以做到。只要设置了DIV的宽度，然后使用margin设置边距0 auto，CSS自动算出左右边距，使得DIV居中。 .mydiv{ margin:0 auto; width:300px; height:200px; } 但是如果要使DIV垂直方向也居中，恐怕CSS需要修改了。 CSS实现水平和垂直居中 要让DIV水平和垂直居中，必需知道该DIV得宽度和高度，然后设置位置为绝对位置，距离页面窗口左边框和上边框的距离设置为50%，这个50%就是指页面窗口的宽度和高度的50%，最后将该DIV分别左移和上移，左移和上移的大小就是该DIV宽度和高度的一半。 .mydiv{ width:300px; height:200px; position:absolute; left:50%; top:50%; margin:-100px 0 0 -150px } 该方法使用普遍，但是前提是必需设置DIV的宽度和高度。如果当页面DIV宽度和高度是动态的

水平垂直居中问题

由 ￡可爱￡侵袭症＋ 提交于 2019-12-01 16:02:35
利用position和margin 实现 　　　　为居中元素的父级添加非static定位 　　　 position: relative; 为居中元素添加以下样式： 　　　　 position: absolute; 　　　　 left: 0; 　　　　top: 0; 　　　　right: 0; 　　　　 bottom: 0; 　　　　 margin: auto; 　　　　 (注意：不给居中元素设置高高的话，该元素会与设置非static定位的父级同宽高。) 　　　　 2.设置弹性布局使子元素居中 　　　　为居中元素的父级设置以下样式： 　　　　width: 400px; 　　　　height: 400px; 　　　　display: flex; 　　　　为居中元素添加以下样式： 　　　　margin: auto; 来源： https://www.cnblogs.com/01angel/p/11691761.html

swiper轮播箭头垂直居中

由 佐手、 提交于 2019-12-01 10:09:54
取消懒加载 if ($('#gallery').length != 0) { $('#gallery img').removeClass('lazyload').attr('src',$('#gallery img').attr('data-src')); } if ($('#s7thumbs').length != 0) { $('#s7thumbs img').removeClass('lazyload').attr('src',$('#s7thumbs img').attr('data-src')); } //轮播箭头垂直居中 function reactive_gallary_arrow_top($swiper) { var outerHeight = $($swiper).find(".swiper-wrapper").height(); var imgHeight = $($swiper).find(".swiper-slide").find("img").height(); var percentage = 0.5*imgHeight/outerHeight * 100; var prevArrow = $($swiper).find(".prev"); var nextArrow = $($swiper).find(".next"); prevArrow.css({

整个DIV 块垂直居中

由 半城伤御伤魂 提交于 2019-12-01 09:47:07
垂直居中一定要有确定大小的 父容器(根) html,body 一般100% <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> html,body { width: 100%; height: 100%; margin: 0; padding: 0; } body { display: flex; align-items: center; /*定义body的元素垂直居中*/ justify-content: center; /*定义body的里的元素水平居中*/ } .content { width: 300px; height: 300px; background: orange; } </style> </head> <body> <div class="content"></div> </body> </html> 来源： https://www.cnblogs.com/qinlongqiang/p/11676233.html

css水平垂直居中问题

由 时光毁灭记忆、已成空白 提交于 2019-12-01 08:14:10
水平居中： 行内元素：text-align:center; 块级元素：magin:0 auto; 子元素设置：position:absolute; left:50%; transform:translateX(-50%); 父元素设置：display:flex; justify-content:center; 垂直居中： line-height:height; 子元素设置：position:absolute; top:50%; transform:translateY(-50%); 父元素设置：display:flex; align-items:center; 水平垂直居中： display:flex; justify-content:center; align-items:center; .parent{position:relative; } .children{position:absolute; width:200px; height:100px; top:50%; left:50%; margin-left:-100px; margin-top:-50px;} .parent{position:relative;} .children{position:absolute; width:200px; height:100px; top:50%; left:50%;

探究 HTML元素的水平垂直居中

由 巧了我就是萌 提交于 2019-12-01 05:42:55
HTML： <body> <div class="maxbox"> <div class="minbox align-center"></div> </div></body> 父元素 .maxbox{ position: relative; width: 500px; height: 500px; margin: 5px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);} 子元素： .minbox{ width: 200px; height: 200px; box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8), -1px -1px 1px rgba(0, 0, 0, 0.8);} 效果图（下面几种方法效果图一样）： 第一种 ： CSS绝对定位 主要利用绝对定位，再用margin设置为auto 水平垂直居中对齐： .align-center{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto;} 第二种 ： CSS绝对定位 主要利用绝对定位，再用margin调整到中间位置。 水平垂直居中对齐： .align-center{ position:

浅谈line-height

由 亡梦爱人 提交于 2019-12-01 05:42:17
#基础知识 有4种模型，分别是 块，块盒模型 containing boxing,包括 line 行内盒模型 inline boxing ,包含 content 行模型 line boxing,包含 inline , line 高度是由最高的 inline 元素决定. 内容区域 content area 这部分内容可以着重看 这里 有详细的介绍。 ##line-height与line boxes高度 由上面的内容可以总结出 line boxes 的高度取决与其下属的 inline boxes 中最高的元素。 对于像input这样的元素,在不同浏览器上line-height属性表现是不同,参考 Line-Height Doesn’t Work As Expected On Inputs ##垂直居中的特性 行高还有一个特性，叫做垂直居中性。line-height的最终表现是通过line boxes实现的，而无论line boxes所占据的高度是多少（无论比文字大还是比文字小），其占据的空间都是与文字内容公用水平中垂线的。 ----张鑫旭的博文 我们经常看到一种垂直居中的方法,那就是让 height 和 line-height 相同 text-vertical{ height:30px; line-height:30px; } 其实在这里起作用的是 line-height ,

CSS实现垂直居中的常用方法

由 房东的猫 提交于 2019-12-01 01:21:47
　　在前端开发过程中，盒子居中是常常用到的。其中 ，居中又可以分为水平居中和垂直居中。水平居中是比较容易的，直接设置元素的margin: 0 auto就可以实现。但是垂直居中相对来说是比较复杂一些的。下面我们一起来讨论一下实现垂直居中的方法。 　　首先，定义一个需要垂直居中的div元素，他的宽度和高度均为300px，背景色为橙色。代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content { width: 300px; height: 300px; background: orange; } </style> </head> <body> <div class="content"></div> </body> </html> 　　效果如下： 我们需要使得这个橙色的div居中，到底该怎么办呢？首先我们实现水平居中，上面已经提到过了，可以通过设置margin: 0 auto实现水平居中，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <style> .content { width: 300px;

水平居中和垂直居中

由 心已入冬 提交于 2019-11-30 23:44:26
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>2.5 水平居中和垂直居中</title> <style> *{ padding: 0; margin: 0; box-sizing: border-box; } .modal-wrapper{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background-color: rgba(0,0,0,0.4); /* display: flex; justify-content: center; align-items: center; */ } .modal{ overflow: hidden; background-color: #fff; border-radius: 10px; font-size: 16px; /* 情况1：容器宽高自适应 没有指定宽高 内容撑开 */ /* 1-1 内联元素 不能设置宽高 内容撑开 */ /* 1-1-1 文字水平垂直居中 多行文字 */ /* display:inline; */ /* padding:0 20px; */ /* 这种情况可以不考虑垂直水平居中 */ /* 1

css样式水平居中和垂直居中的方法

由 爷，独闯天下 提交于 2019-11-30 06:29:14
水平居中（包含块中居中） 1. 定宽，左右margin为auto。（常规流块盒、弹性项目[不用定宽]） 2. 弹性盒设置justify-content: center，让弹性项目在主轴上居中。（普遍适应） 3. 父元素设置text-align: center，让其内部的行盒、块盒居中（文本）。 4. 相对定位元素，margin-left:50%; transform:translateX( -50%)。[margin,padding相对于包含块宽度的百分比] 【终极方案】 垂直居中 1. 单行文本垂直居中，设置父元素的line-height为包含块高度。 2. 弹性盒设置align-items:center，让弹性项目在侧轴上居中。 3. 相对定位元素，top：50%；transform:translateY(-50%)。【终极方案】 来源： https://www.cnblogs.com/qxz17760485467/p/11568533.html
订阅 垂直居中