垂直居中 | 易学教程

元素水平或垂直居中问题

阅读更多关于元素水平或垂直居中问题

一、元素的水平居中 ⑴.行内元素的水平居中：text-align ⑵.块级元素的水平居中：margin：0 auto 二、元素的垂直居中 ⑴.行内元素垂直居中： line-height设置为与父级元素的高度一样 ⑵.、块级元素垂直居中： 1.可以给父级使用相对定位，子级使用绝对定位，将top、left、right、bottom为0 a.给父级相对定位，子级绝对定位：left：50%；top：50%；margin-left：-子级元素宽度一半；margin-top：-子级元素高度一半 b.给父级相对定位，子级绝对定位 height:百分比x; x属于0~100% margin：auto; 　eg: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>垂直居中</title> <style type="text/css"> /*IE版本低于7时不能正常使用*/ .outer{ height: 200px; position: relative; background: #bfe; } .outer .inner{ position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 50%; height: 30%; margin:

图标文字垂直居中对齐方法

阅读更多关于图标文字垂直居中对齐方法

超级简单好用的图标文字垂直居中对齐方法！！！开发中经常会遇到字体图标与文字垂直居中对其的需求，常常使我们感到头疼，无论是设置margin还是padding都不行，上图：现在推荐大家一种超级简单的方法：vertical-align: -1px; : 我们将字体图标写进span中 < div > < span > & #xa2201 ; < / span > 收藏 < / div > < div > < span > & #xe62c ; < / span > 分享 < / div > 然后给span设置vertical-align负值 span { font - family : 'iconfont' ; font - size : 18 px ; vertical - align : - 3 px ; } 具体负值为多少可据需要调节，ok，搞定：来源： CSDN 作者：你头发乱了喔_ 链接： https://blog.csdn.net/dujyong/article/details/103569859

水平垂直居中

阅读更多关于水平垂直居中

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>垂直居中</title> <style> *{ margin: 0; padding: 0; } html,body{ height:100%; } #bg{ height:100%; background: powderblue; width: 100%; } #inner{ background: blueviolet; height:240px; width:240px; position: absolute; top:50%; left:50%; transform: translate(-120px,-50%); } </style> </head> <body> <div id="bg"> <div id="inner"></div> </div> </body> </html> CSS权值: 事件冒泡与事件捕获: 来源： https://www.cnblogs.com/eret9616

用绝对定位实现垂直居中

阅读更多关于用绝对定位实现垂直居中

用绝对定位实现垂直居中 HTML代码： <div class="posdiv"> <img src="1.jpg" alt=""> </div> CSS代码： body{background: #ccc;} .posdiv{width: 300px;height: 250px;background: #fff;position: relative; margin:0 auto} .posdiv img{width: 100px;position: absolute;top: 50%;margin-top: -50px;} 解释：一张包裹在div中的img图片，我们给不光给图片以及div元素定义了尺寸，还给div元素定义了#fff的背景色(背景颜色可以根据需求设置)。给img的父元素添加相对定位属性（position: relative），同时，要给子元素也就是图片img元素添加绝对定位属性（position: absolute）。将图片元素的top属性设置为50%。现在我们需要给img元素设置一个负的margin-top值，这个值为你想要实现垂直居中的元素高度的一半。如果不确定元素的高度，可以不使用margin-top，而是使用transform:translateY(-50%);属性。来源： https://www.cnblogs.com/jjxhp/p

盒子水平垂直居中的几种方法

阅读更多关于盒子水平垂直居中的几种方法

盒子水平垂直居中的几种方法 *HTML* ***style*** 1、position + 负外边距 2、position + margin: auto 3、position + transform 4、父盒子（flex） 5、父盒子（flex） + 子盒子（center） HTML < div id = "box" > < div class = "box" > < / div > < / div > style 1、position + 负外边距 #box { width : 300px ; height : 300px ; border : 1px solid red ; position : relative ; } .box { width : 100px ; height : 100px ; background-color : blueviolet ; position : absolute ; top : 50% ; left : 50% ; margin-left : -50px ; margin-top : -50px ; } 2、position + margin: auto #box { width : 300px ; height : 300px ; border : 1px solid red ; position : relative ; } .box

CSS水平垂直居中

阅读更多关于 CSS水平垂直居中

先来一个盒盒（要操作它嘛） <div style="height:50px;border:1px solid red;"> <label style="line-height:50px">单行文本label垂直居中：设置line-height为父级行高</label> </div> 水平垂直居中方式一：Flex布局 [推荐] 优点：内容块的高度任意，优雅的溢出。缺点：IE8/IE9不支持，需要浏览器前缀，渲染可能会有问题。 <div class="hv_flex"> <div style="width: 20px;">左</div> <div class="hv_flexChild">flex布局垂直水平居中</div> <div style="width: 20px;">右</div> </div> .hv_flex { display: flex; width: 600px; height: 100px; border: 1px solid red; justify-content: center; align-content: center; align-items: stretch; /* stretch让盒子内的每个元素的高度都等于行高 */ } .hv_flexChild { flex: 1; border: 2px solid green; left: 10px;

div块水平居中，垂直居中

阅读更多关于 div块水平居中，垂直居中

水平居中一个div想要水平居中于它的父div中只需要给它加css属性margin:0 auto; 即可 <!DOCTYPE html> <html> <head> <title></title> </head> <style> #box{ width: 200px; height: 200px; border:2px solid #000; line-height: 200px; } #one{ background: #000; width:50px; height: 50px; margin:0 auto; } </style> <body> <div id="box"> <div id="one"></div> </div> </body> </html> 垂直居中一个div想要垂直居中于它的父div中，需要给它添加css属性display: inline-block;再给它的父div添加css属性vertical-align: middle;即可 <!DOCTYPE html> <html> <head> <title></title> </head> <style> #box{ width: 200px; height: 200px; border:2px solid #000; line-height: 200px; vertical-align: middle;

0015 行高那些事：line-height

阅读更多关于 0015 行高那些事：line-height

目标理解能说出行高和高度三种关系能简单理解为什么行高等于高度单行文字会垂直居中应用使用行高实现单行文字垂直居中能会测量行高 3.1 行高测量行高的测量方法： 3.2 单行文本垂直居中行高我们利用最多的一个地方是：可以让单行文本在盒子中垂直居中对齐。文字的行高等于盒子的高度。这里情况些许复杂，开始学习，我们可以先从简单地方入手学会。行高 = 上距离 + 内容高度 + 下距离上距离和下距离总是相等的，因此文字看上去是垂直居中的。行高和高度的三种关系如果行高等高度文字会垂直居中如果行高大于高度文字会偏下如果行高小于高度文字会偏上 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " > < title > Document </ title > < style > div { width : 100px ; height : 50px ; background-color : pink ; line-height : 50px ; } </ style > </ head > < body > < div > 文字垂直居中 </ div > </ body > </ html > 来源： CSDN 作者： maopolunzi

如何让div水平垂直居中

阅读更多关于如何让div水平垂直居中

如何让div水平垂直居中 @(css)[妙瞳] 引子我们经常遇到需要把div中的内容进行水平和垂直居中。所以，这里介绍一种方法，可以使div水平居中和垂直居中。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style> *{ margin:0; padding:0; } div.box{ background-color:pink; border:2px solid #000; width:960px; height:500px; margin-left:50px; } </style> </head> <body> <div class="box"> <img src="girl.jpg" alt="美女"> </div> </body> </html> 效果图：现在先让图片在div中水平居中我们可以先给图片套一层盒子。代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div水平垂直居中</title> <style type="text/css"> *{ margin:0; padding:0; } div.container{

水平居中和垂直居中

阅读更多关于水平居中和垂直居中

1.水平居中 (1) 文本、图片等行内元素的水平居中　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元素的水平居中　　通过设置margin-left:auto;和margin-right:auto;来实现的。 (3) 不确定宽度的块级元素的水平居中　　方法一: 　　使用table标签，table本身并不是块级元素，如果不给它设定宽度的话，它的宽度由内部元素的宽度“撑起”，但即使不设定它的宽度，仅设置margin-left:auto;和margin-right:auto;就可以实现水平居中! 　　将需要居中的部分包含在table标签内，对table设置margin-left:auto;和margin-right:auto;就可以使table水平居中，间接使需要居中的部分水平居中。　　缺点：增加了无语意标签，加深了标签的嵌套层数。 <style type="text/css">ul{list-style:none; margin:0; padding:0;}.wrap{ width:500px; height:100px;}table{margin-left:auto;margin-right:auto;}.test li{float:left; display:inline; margin-right:5px;

订阅垂直居中