垂直居中

DIV块中 元素垂直居中

由 旧巷老猫 提交于 2020-04-08 04:44:27
1 DIV块中 元素垂直居中 作者：知乎用户 链接：https://www.zhihu.com/question/20543196/answer/99429177 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 block 元素 block 元素利用绝对定位以及负外边距，适用于知道元素的宽度和高度，兼容性好，所以会看到很多远古时代的居中都采用这种办法，参照下图，注意这里的外边距减去的是 block 元素宽度的一半，即 margin:-（width/2） px <img src="https://pic1.zhimg.com/50/6732c0281c722dcb0208716a0df24db3_hd.jpg" data-rawwidth="518" data-rawheight="299" class="origin_image zh-lightbox-thumb" width="518" data-original="https://pic1.zhimg.com/6732c0281c722dcb0208716a0df24db3_r.jpg"> block 元素利用绝对定位以及 transform ，适用于不知道元素的宽度盒高度，参照下图 <img src="https://pic4.zhimg.com

垂直居中的图片的高度也不确定

由 可紊 提交于 2020-04-08 04:43:25
在网页设计过程中，有时候会希望图片垂直居中的情况。而且，需要垂直居中的图片的高度也不确定，这就会给页面的布局带来一定的挑战。下面总结了一下，曾经使用过的几种方法来使图片垂直居中，除了第一种方法只限于标准浏览器外，另外两种方法的兼容性还不错。 方法一 将外部容器的显示模式设置成display:table，这个设置的意思不用多说了吧… img标签外部再嵌套一个span标签，并设置span的显示模式为display:table-cell，这样span内部的内容就相当于表格，可以很方便的使用vertical-align属性来对齐其中的内容了。 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>方法1 - 未知高度的图片垂直居中 - www.nowamagic.net</title> <style type="text/css"> body {height:100%;} #box{ width:500px;height:400px; display:table; text-align:center; border:1px solid #d3d3d3;background:#fff; }

让文本垂直居中的几个方法

由 会有一股神秘感。 提交于 2020-03-29 00:32:09
一、使用line-height（适用于知道高度，一行文字） 让line-height和height一样高，可使文本垂直居中。 二、设置上下padding 三、通过table .testdiv { height: 87px; display: table; } .innerdiv { width: 20px; height: 100%; line-height: 20px; padding: 0 4px; border-right: 1px solid #F4F8FB; font-size: 14px; text-align: center; background: #F4F8FB; display: table-cell; vertical-align: middle; } <div class="testdiv"> <div class="innerdiv">服装</div> </div> 三、使用 vertical-align和空标签（可用于高度未知） .testdiv { height: 87px; } h4 { width: 20px; height: 100%; float: left; line-height: 20px; padding: 0 4px; border-right: 1px solid #F4F8FB; font-size: 14px; text

在OSX绘制单行文本垂直居中

由 旧街凉风 提交于 2020-03-28 03:07:59
在iOS开发过程中,对单行文本的垂直居中似乎是一件非常easy的事情,直接用下面这段代码就可以完成: 123456789101112131415 @interface XXView : UIView@end@implementation XXView- (void)drawRect:(CGRect)rect{ UIFont *font = [UIFont fontWithName:@"Helvetica Neue" size:13]; NSDictionary *attributes = @{NSFontAttributeName:font,NSForegroundColorAttributeName:[UIColor redColor]}; NSAttributedString *title = [[NSAttributedString alloc] initWithString:@"我是垂直居中的" attributes:attributes]; [title drawAtPoint:CGPointMake(CGRectGetMidX(self.bounds)-title.size.width/2, CGRectGetMidY(self.bounds)-title.size.height/2)];}@end 在OSX平台上,我们一般会这样写这段代码:

flex布局垂直居中

由 旧街凉风 提交于 2020-03-26 17:44:05
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box{ display: flex; display: -webkit-flex; border: 1px solid #0000FF; height: 200px; width: 400px; align-items:center; justify-content:center; } .item{ width: 50px; height: 40px; border: 1px solid #00C1B3; } </style> </head> <body> <div id="box"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> <div class="item">5</div> </div> </body> </html> 来源： https://www.cnblogs.com/xm666/p/11053220.html

css 实现垂直居中

由 孤人 提交于 2020-03-26 05:04:11
在前端开发中，实现水平居中很容易，一般实现方式：给元素margin:0 auto; 但是垂直居中就不那么好控制了。 怎么样垂直居中呢？ 这里可以用到position属性， 　　假设有如下结构 　　HTMl:　 <div class="father"> <div class="child"></div> </div> 　　CSS .father{ width:500px; height:500px; position:relative; background-color:green } .child{ position:absolute; width:200px; height:200px; top:50%;/*********************这里是关键*********/ margin-top:-100px;/**************向上修正为元素的一半**********/ background-color:red; } 　　这样就可以实现垂直居中。当然margin-top：-150px也可以使用css3中transform：translateY（-150px）修正，但是，css3毕竟有些许的兼容问题。 来源： https://www.cnblogs.com/webfullstack/p/5282394.html

负边距+定位：水平垂直居中

由 元气小坏坏 提交于 2020-03-26 02:10:54
<style type="text/css"> .demo { background: gray; width: 100px; height: 200px; border: solid 5px black; /* border-width: 10px; border-color: black; !!要想有边框出现，必须有边框样式，仅有宽度和颜色是不行的*/ margin: auto; /*水平居中:margin:auto; &&margin:100px auto;两者都是可以的 */ position: absolute; left: 50%; top: 50%; margin-left: -50px; /*值为-width/2 */ margin-top: -100px; /*值为-height/2 */ } </style> <body> <div class="demo"></div> </body> 来源： https://www.cnblogs.com/feile/p/5367694.html

line-height

由 半腔热情 提交于 2020-03-19 08:23:46
line-height，行高，指的是基线与基线之间的距离 1.文本在盒子中垂直居中，我们的做法是让行高等于盒子的高度，这是为什么呢？ 要想让文本在盒子中垂直居中，那么效果应该是这样的 此时的行高，就等于 内容高度 + 下距离 + 上距离 = 盒子的高度。 来源： https://www.cnblogs.com/shizunatsu/p/12521861.html

移动端常见问题（水平居中和垂直居中）

由 ぃ、小莉子 提交于 2020-03-17 17:21:39
先准备个测试模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .bg{ width:100%; height:100%; position: fixed; top:0; right:0; bottom:0; left:0; background-color: lightblue; } .text{ background:#fff; border-radius: 5px; } </style> </head> <body> <div class="bg"> <span class="text">单行文字水平垂直居中</span> </div> </body> </html> 内联元素，没有设置宽高 1、自身水平垂直居中 设置padding （左右方向有效，上下方向无效） 2、在容器内水平垂直居中 方法一： position: absolute; top:50%; left:50%; transform:translate(-50%,-50%); 方法二：flex布局（适合移动端） display:

图片垂直居中、水平居中

由 ￣綄美尐妖づ 提交于 2020-03-14 04:22:05
图片水平垂直居中情况很多，最简单的办法是吧图片设置为背景，给背景设置background-position:center; 如果只能用图片的话： 1.图片宽高固定，这种情况很简单。 水平居中：就在图片的css中加 dispaly:block;margin:0 auto; 垂直居中：自己算出（div的高度-图片的高度），得到margin-top值即可。 2.给div设定text-align:center;可使图片水平居中； 再给图片img设定 vertical-align:middle;即可达到垂直居中（是给图片加不是给外面的div加 ，不要记错哦！） 来源： https://www.cnblogs.com/niu19981114/p/10122502.html
订阅 垂直居中