垂直居中

inline-block垂直居中的方法

由 生来就可爱ヽ(ⅴ＜●) 提交于 2020-02-11 08:42:16
vetical-align的功能是设置行内元素垂直方向上的对齐方式。 可能的值 baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标。 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 text-top 把元素的顶端与父元素字体的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit 规定应该从父元素继承 vertical-align 属性的值。 可以控制图片、文字等行内元素在行内的垂直方向上的对齐方式 如何使用vetical-align使块级元素垂直居中？ 以下面为例： body{ <div class="wrapper"> <div class="content">some content</div> </div> } 1、为父容器wrapper设置高度 html,body{ 　　height:100% } .wrapper{ 　　height:100% } 2、使content容器变为行内元素 .content{ display:inline-block; } 3

css实现高度垂直居中

由 99封情书 提交于 2020-02-09 05:48:39
1：单行文字垂直居中： 如果一个容器中只有一行文字的话，定义height(高度)和 line-height(行高)相等即可。 　　如：<div style="height:25px;line-height:25px;overflow:hidden">aa</div> 2：多行文本固定高度垂直居中： 核心：display:table 和display:table-cell ;vertical-align:middle; 兼容：ie7+ 1 <div class="wrapper"> 2 <div class="content">content age</div> 3 </div> 相对应的css代码如下： .wrapper{ height:400px; display:table; } .content{ vertical-align:middle; display:table-cell; border:1pxsolid#FF0099; background-color:#FFCCFF; width:760px; } 核心：display:table 和display:table-cell ;vertical-align:middle; 以及使用绝对定位 兼容：ie6+ <div class="wrap"> <div class="subwrap"> <div class=

flex布局 之 基于可视化窗口（浏览器页面高度）垂直居中

由 我的梦境 提交于 2020-02-07 11:46:58
因为 父元素的宽度 是铺满页面，所以 也是基于可视化窗口的垂直居中 .g-cent是父元素，.m-cent是子元素 .g-cent { height: 100vh; display: flex; justify-content: center;/* 水平居中 */ align-items:center;/* 垂直居中 */ } .m-cent { width: 1200px; height: 680px; background: aqua; } 这里解释下父元素设置100vh的原因 Vh:相对于视框的高度：视框高度是100Vh “视框”说白了就是浏览器窗口的高度，也就是window.innerHeight获取的值 1vh=视窗高度的1%，所以100vh也就是100% 如果给父元素直接设置height：100%；没办法实现垂直居中，具体原因不知，如果哪位大佬知道原因，请告知一下，感谢 来源： CSDN 作者： 叫我虫虫就好 链接： https://blog.csdn.net/qq_40319394/article/details/103928087

多种方式垂直水平居中

由 南笙酒味 提交于 2020-02-03 00:11:28
1.　不需要知道父容器和子容器的具体尺寸 （1）方法一：margin <div class="wrapper"> <div class="content"></div> </div> .wrapper { display: table-cell; width: 500px; height: 500px; text-align: center; /*水平居中*/ border: 1px solid #eee; vertical-align: middle; /*图片垂直居中*/ position: relative; } .content { width: 200px; height: 200px; background-color: red; margin: auto; } 　　（2）方法二：绝对定位 + transform， 应用到了css3知识，需要注意兼容性问题 <div class="wrapper"> <div class="content"></div> </div> .wrapper { display: block; width: 500px; height: 500px; border: 1px solid #eee; position: relative; } .content { width: 200px; height: 200px; background

CSS-文本垂直居中

由 柔情痞子 提交于 2020-02-03 00:09:55
文本水平居中可以将text-align设置为center即可，垂直居中的话如果是单纯的设置vertical-align是没办法单独设置成功的，垂直居中的文字分为单行文本和多行文本，主要是两种不同的实现方式。 单行文本垂直居中 设置line-height和height高度一样即可: .outer-line { border: 1px solid red; height: 200px; line-height: 200px; width: 200px; } <div class="outer-line"> 博客园-FlyElephant </div> 多行文本垂直居中 通过table和table-cell的方式实现垂直居中： <div class="outer-table"> <div class="inner"> 博客园-FlyElephant 原文地址:http://www.cnblogs.com/xiaofeixiang/ </div> </div> 样式设置: .outer-table { border: 1px solid red; height: 200px; width: 200px; margin-top: 20px; display: table; } .inner { display: table-cell; vertical-align: middle; } 来源

css使图片垂直居中

由 ε祈祈猫儿з 提交于 2020-02-02 05:45:24
第一种方法 <style type="text/css"> .first{ width: 500px; height: 500px; border: 1px solid black; margin-left: 50%; transform: translateX(-50%); text-align: center; } .second{ width: 200px; height: 200px; border: 1px solid black; display: inline-block; vertical-align: middle; } span{ height: 500px; display: inline-block; vertical-align: middle; } </style> </head> <body> <div class="first"> <span></span> <div class="second"> </div> </div> </body> 第二种方法 <style type="text/css"> .first{ width: 500px; height: 500px; border: 1px solid black; margin-left: 50%; transform: translateX(-50%); position:

子盒子相对于父盒子垂直居中详解

由 ◇◆丶佛笑我妖孽 提交于 2020-01-31 04:22:02
https://segmentfault.com/a/1190000016344599?utm_source=tag-newest 有什么作用？ 严格实现垂直居中的几种方法 有哪几种方法？ 1.position+margin 2.position+transform 3.flex 4.box-sizing+padding 这三种主要实现子盒子关于父盒子垂直居中的问题 头两种主要是 把儿子的左上角移动父亲高度的50% 然后在通过margin获取transform在移动儿子自己高度的50% 第三种就是直接居中了 采用的是弹性盒子模型的方式 不太严格的话 第三种也是比较方便的 white-space换行属性 来源： CSDN 作者： weixin_46013844 链接： https://blog.csdn.net/weixin_46013844/article/details/104116838

div的水平居中和垂直居中

由 元气小坏坏 提交于 2020-01-27 00:58:13
div是html中的一个标签，一般称之为盒子。有宽度、有高度，是可以存放内容的一个区域。但是如何让div在页面上以水平或者垂直的方式居中呢？ 1.div水平居中 　　div水平居中其实很简单，只要使用到margin中的auto就能实现。代码如下： <html> <head> <title>div水平居中</title> <style> .horizontal{ width:800px; height:300px; background: #ff6a00; margin:100px auto; /*100px是div的上下边距，auto表示左右边距自适应（即水平居中）*/ } </style> </head> <body> <div class="horizontal"> 我是水平居中的div </div> </body> </html> 2.div垂直居中 　　div垂直居中的方法一般是使用absolute定位（绝对定位）的方式来实现的。代码如下： <html> <head> <title>div水平垂直居中</title> <style> .divbox{ width:500px; height:300px; line-height:300px; text-align:center; background:#ccc; position:absolute; left:50%;

css的div动态水平垂直居中

由 依然范特西╮ 提交于 2020-01-24 20:52:48
div动态水平垂直居中，思路如下： （1）先定位。如果相对于距离最近的父元素，用absolute；如果相对于body，用fixed。 （2）然后，top和left都设为50%。 （3）要居中的div的margin-top和margin-left，都设置为该div高度和宽度的一半。 position:absolute; width:200px; height:100px; left:50%; top:50%; border:1px solid red; margin-left:-100px; margin-top:-50px; 如果只是水平居中，只用一个margin就行了。 margin:0 auto; 来源： https://www.cnblogs.com/lsongyang/p/7493712.html

css元素水平居中和垂直居中的方式

由 烂漫一生 提交于 2020-01-23 04:45:32
关于居中的问题，一直处于疑惑不解的状态，知道的几种方法好像也不是每一次都会起到作用，所以更加迷惑。主要是不清楚该 在什么情况下采用哪种解决方法，所以，整理了一些方法，梳理一下思路，做一个总结。 1. line-height使单行文本垂直居中 对于单行文本，可以设置它的行高等于它父容器的高度，这样就实现了该文本的垂直居中，但是此方法只适用于单行文本。 （其实严格意义上来说，文字并不是绝对的垂直居中的，有那么很小的几像素差距，只是我们看上去它是居中的；这里的原因，就是文本的基线对齐的因素了，感兴趣的朋友可以再深入地去了解一下，这里我就不展开了）平时这样用就可以了。 对于多行文本，设置line-height就无法实现了，在这里有一个方法比较好。 还记得刚学习html的时候，大家应该都记得表格table吧，在每一个单元格里，如果我们想要让里边的文本垂直居中的话，用到的属性是 vertical-align：middle；所以在多行文本的情况下，就可以用的这个属性。 前提条件是，我们需要给文本再加一层标签，这里在 box3 中，我用 span 标签把文字包了起来。 给 span 的父级元素 div.box3 设置 display:table；给 span 设置display:table-cell;vertical-align:middle; 就可以了。 这里我没有考虑IE低版本兼容性问题
订阅 垂直居中