垂直居中

元素的水平垂直居中解决方法

由 不羁岁月 提交于 2019-11-28 15:42:00
有时候为了使页面元素看起来更美观，常常会让元素水平居中，垂直居中。下面总结了几个常用的方法。 首先HTML结构如下： 1 <div class="out"> 2 <div class="in">布局</div> 3 </div> 方法1、使用最流行的flex布局方案。 1 .out { 2 display: flex; 3 justify-content: center; 4 align-items: center; 5 } 方法2、使用定位和偏移 1 .out { 2 position: relative; 3 } 4 .in { 5 position: absolute; 6 top: 50%; 7 left: 50%; 8 transform: translate(-50%, -50%); 9 } 使用transform可以不用考虑内部元素的宽高。 方法3、使用定位和负margin 1 .out { 2 position: relative; 3 } 4 .in { 5 position: absolute; 6 top: 50%; 7 left: 50%; 8 margin-left: -25px; 9 margin-top: -12.5px; 10 } 此时，需要明确内部元素的宽高。（这里设置的内部元素in是高25px，宽50px） 方法4、使用定位和margin

css实现水平垂直居中

由 空扰寡人 提交于 2019-11-28 15:20:22
第一种：利用css3的transform和绝对定位 <!DOCTYPE html> <html> <head> <title></title> </head> <style type="text/css"> /*消除行内元素的默认边距*/ *{ margin: 0; padding: 0; box-sizing: border-box;/*为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制*/ } body{ background-color: #999; } main{ background-color: #fff; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);/*以左上角为圆点向上和左偏移自身宽高50%的距离*/ -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); } </style> <body> <main>水平垂直居中</main> </body> </html> 效果如图所示，并且不管如何改变页面的宽高，元素始终水平垂直居中。 第二种：利用css3的transform和相对定位 使用这种方法必须设置html,body的高度 <!DOCTYPE html

CSS布局：元素垂直居中

由 孤人 提交于 2019-11-28 12:58:27
CSS布局之元素垂直居中 本文将依次介绍在不同条件下实现 垂直居中 的多种方法及简单原理 Tip： 下文中说的适用场景只是举了几个简单的例子方便读者理解。实际应用场景太复杂，生搬硬套容易出错。最重要的是掌握各种方法能够实现居中的原理。只要掌握了原理，那么不管问题怎么变都可以根据自己的理解选择合适的方法。 一、使用line-height 1.原理 ​ 有行高的元素 ，内容会默认显示在行高的 垂直中心处 ，通过设置行高等于父元素的高度，可以达到内容在父元素中垂直居中的效果 2.实现步骤 （1）父元素有一个确定的高度 （2）在父元素或在子元素中设置line-height等于父元素的高度 3.适用场景 （1）具有行高属性的单行元素 Tip： 若元素有多行，line-height用同样的原理也可实现，不过需要根据行数计算且容易出错（若父元素宽度变化影响行数，那么就要重新计算布局），这里不推荐使用line-height设置多行居中。 4.完整代码展示 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>单行元素垂直居中</title> <style> #box { height: 120px; line-height: 120px; /*设置成和父元素同高，对子元素父元素设置都有效*/ border: 2px solid

poi导出excel解决内存溢出

由 。_饼干妹妹 提交于 2019-11-28 07:52:21
解决方法 写excel时使用 SXSSFWorkbook workbook = new SXSSFWorkbook(xssfWorkbook , 1000);只在内存中留1000行，不会占用过多的内存。下面只贴了部分代码。 public static void createExcelByTrade(List<String[]> mergeCellConfigList , Map<String, String[]> cellConfMap , List dataList ,String tempPath , String fileName ) { try { int excelRowNum = 0; short fontSize = 12; // 创建新的Excel 工作簿 XSSFWorkbook xssfWorkbook = new XSSFWorkbook(); SXSSFWorkbook workbook = new SXSSFWorkbook(xssfWorkbook , 1000); Sheet sheet = workbook.createSheet(fileName); // 设置合并表头 setMergeHeaderCellByTrade( workbook, sheet, mergeCellConfigList , excelRowNum, fontSize );

不定宽高盒子的垂直水平居中的方法

由 三世轮回 提交于 2019-11-28 03:13:55
1、 .father { display: table-cell; text-align: center; vertical-align: middle; width:500px;height: 500px; } .child { display: inline-block; } 2、 .container { 　　position: relative; } .inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 3、vh和vw是两个比较偏的单位，是指“viewport的height和width的1%”，比如说50vh就是当前视口（窗口的高度，实验中包含了滚动条）高度的50%。也就是说vw将获得和1%差不多的window宽度。 .inner { position:fixed; top: 50vh; left: 50vw; transform: translate(-50%, -50%); } 　　衍生 　　 .inner2 { position:fixed; top: 0; left: 0; margin: 50vh 0 0 50vw; transform: translate(-50%, -50%); } 4、 .father { display: flex;

div+css实现水平/垂直/水平垂直居中超详解

由 本秂侑毒 提交于 2019-11-28 02:59:40
目录 一、水平居中 1.块级元素水平居中 方法一:设置margin:0 auto 方法二:设置flex布局 方法三:设置css3的transform 2.行内元素水平居中 行内元素在块级元素中水平居中 方法一：将外层块级元素设置为text-align：center 方法二：将行内元素设置为块级元素 3.元素内部文字水平居中 1）块内文字水平居中 方法：text-align：center 2）行内文字水平居中 二、垂直居中 1）块级元素的内部元素垂直居中 方法一：flex布局（块级元素、行内元素都可） 方法二：css3 transform属性（对行内元素无效） 2）元素内文字垂直居中 1.设置line-height和height相同（仅在容器宽高固定时有效，那么当宽高为百分比时无效） 2.flex布局 附：css2的vertical-align属性（对块级元素无效） 三、水平垂直居中 1.块级元素水平垂直居中 1）使用flex布局 2）使用css3 transform属性 2.元素内文字水平垂直居中 方法一：设置text-align和line-height 方法二：flex布局(都可) 综上所述，flex布局近乎全能，要好好掌握！！ 在此之前，清除一下浏览器的默认样式 html,body { margin : 0 ; padding : 0 ; } ok，开始正文~ 一、水平居中 1

垂直居中的几种方法

由 我的梦境 提交于 2019-11-28 01:29:57
(1)margin:auto法 css: div{ width: 400px; height: 400px; position: relative; border: 1px solid #465468; } img{ position: absolute; margin: auto; top: 0; left: 0; right: 0; bottom: 0; } html: <div> <img src="mm.jpg"> </div> 定位为上下左右为0，margin：0可以实现脱离文档流的居中. (2)margin负值法 .container{ width: 500px; height: 400px; border: 2px solid #379; position: relative; } .inner{ width: 480px; height: 380px; background-color: #746; position: absolute; top: 50%; left: 50%; margin-top: -190px; /*height的一半*/ margin-left: -240px; /*width的一半*/ } 补充：其实这里也可以将marin-top和margin-left负值替换成， transform：translateX(-50%)和transform

bootstrap实现模态弹框垂直居中

由 南楼画角 提交于 2019-11-28 00:25:13
以下都是参考别人的，没试验过效果，先收藏一下； 1. https://blog.csdn.net/hyt941026/article/details/83545706 2. https://blog.csdn.net/qq_37221649/article/details/87397969 Bootstrap4模态框垂直居中 3. http://blog.sina.com.cn/s/blog_6df0e7960102wfhd.html Bootstrap4模态框垂直居中 4. boostrap 3 的模态弹框垂直居中 https://www.cnblogs.com/wteam-xq/p/4328332.html https://www.cnblogs.com/ly-radiata/articles/4974928.html 来源： https://www.cnblogs.com/sherryweb/p/11382565.html

移动端：移动端页面布局

由 那年仲夏 提交于 2019-11-27 23:40:20
移动端页面布局 一、 水平居中 行内元素 text-align: center; 块级元素 1 /* 可以采取绝对定位的方式实现 */ 2 .center { 3 width: 960px; 4 position: absolute; 5 left: 50%;（25%） 6 margin-left: -480px; 7 } 二、 自适应块级元素水平居中 前面介绍的块级元素居中要求有固定宽度，对于自适应的块级元素就无能为力了 1 /* 借助css3的变形属性Transform来完成 */ 2 .content { 3 position: absolute; 4 left: 50%; 5 transform: translateX(-50%); 6 } 三、 行内元素垂直居中 单行文本的垂直居中 元素的高度和行高相等时，文本呈现垂直居中 多行文本的垂直居中 不固定高度的垂直居中 通过设置padding实现 固定高度的垂直居中 使用display设置为table，配合样式vertical-align设置为middle来实现 四、 块级元素的垂直居中 1 /* 固定宽高的垂直居中 */ 2 .content { 3 width: 100px; 4 height: 100px; 5 position: absolute; 6 left: 50%; 7 top: 50%; 8 margin

内容垂直居中

由 不羁岁月 提交于 2019-11-27 20:42:57
方法一： 采用上下 padding 形式，将内容放置在垂直居中 .line { padding: 2% 0; text-align: center; height: 5px; } <div class="line"> 内容垂直居中 </div> 方法二： 采用高度与行高一直，保证内容只有一行，内容自然垂直居中 .line { text-align: center; height: 5px; line-height: 5px; } <div class="line"> 内容垂直居中 </div> 来源： https://my.oschina.net/9Discount/blog/3094344
订阅 垂直居中