CSS实现垂直居中的5种方法
方法一
这个方法把一些 div
的显示方式设置为表格,因此我们可以使用表格的 vertical-align
property 属性。
<div id="wrapper"> <div id="cell"><div class="content">Content goes here</div></div></div>
#wrapper {display: table; }#cell {display: table-cell;vertical-align: middle; }
优点:
content
可以动态改变高度(不需在 CSS 中定义)。当
wrapper
里没有足够空间时,content
不会被截断
缺点:
Internet Explorer(甚至 IE8 beta)中无效,许多嵌套标签(其实没那么糟糕,另一个专题)
方法二:
这个方法使用绝对定位的 div
,把它的 top
设置为 50%
,top margin
设置为负的 content
高度。这意味着对象必须在 CSS 中指定固定的高度。
因为有固定高度,或许你想给 content
指定 overflow:auto
,这样如果 content
太多的话,就会出现滚动条,以免content
溢出。
<div class="content"> Content goes here</div>
#content {position: absolute;top: 50%;height: 240px;margin-top: -120px; /* negative half of the height */}
优点:
适用于所有浏览器
不需要嵌套标签
缺点:
没有足够空间时,
content
会消失(类似div
在body
内,当用户缩小浏览器窗口,滚动条不出现的情况)
方法三
这种方法,在 content 元素外插入一个 div。设置此 div
height:50%; margin-bottom:-contentheight;
。
content 清除浮动,并显示在中间。
<div id="floater"> <div id="content">Content here</div></div>
#floater {
float: left;height: 50%;margin-bottom: -120px; }#content {clear: both;height: 240px;position: relative; }
优点:
适用于所有浏览器
没有足够空间时(例如:窗口缩小)
content
不会被截断,滚动条出现
缺点:
唯一我能想到的就是需要额外的空元素了(也没那么糟,又是另外一个话题)
方法四
这个方法使用了一个 position:absolute
,有固定宽度和高度的 div
。这个 div
被设置为 top:0; bottom:0;
。但是因为它有固定高度,其实并不能和上下都间距为 0,因此 margin:auto;
会使它居中。使用 margin:auto;
使块级元素垂直居中是很简单的。
<div id="content"> Content here</div>
#content {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;height: 240px;width: 70%; }
优点:
简单
缺点:
IE(IE8 beta)中无效
无足够空间时,
content
被截断,但是不会有滚动条出现
方法五
这个方法只能将单行文本置中。只需要简单地把 line-height
设置为那个对象的 height
值就可以使文本居中了。
<div id="content"> Content here</div>
#content {height: 100px;line-height: 100px; }
优点:
适用于所有浏览器
无足够空间时不会被截断
缺点:
只对文本有效(块级元素无效)
多行时,断词比较糟糕
这个方法在小元素上非常有用,例如使按钮文本或者单行文本居中。
CSS实现垂直居中的5种方法相关推荐
- CSS实现垂直居中的7种方法
CSS实现垂直居中的7种方法 1.设定行高(line-height) 2.设置伪元素::before 3.absolute + transform 4. 设置绝对定位 5.设置display:flex ...
- java文本框字体垂直居中_实现css文字垂直居中的8种方法
注:以下demo都只是针对现代浏览器所做,未兼容低版本的IE以及其他非主流浏览器. 实现css文字垂直居中的8种方法如下: 1.使用绝对定位和负外边距对块级元素进行垂直居中 css垂直居中效果: cs ...
- html怎么把元素垂直居中显示,分享html css元素垂直居中的几种方法
元素垂直居中的几种方法: 方法一:设置height和line-height 在CSS中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置 ...
- 使用 CSS 实现垂直居中的8种方法
CSS垂直居中的8种方法 目录 CSS垂直居中的8种方法 1.通过vertical-align:middle实现CSS垂直居中. 2.通过display:flex实现CSS垂直 ...
- 纯CSS实现垂直居中的几种方法
垂直居中是布局中十分常见的效果之一,为实现良好的兼容性,PC端实现垂直居中的方法一般是通过绝对定位,table-cell,负边距等方法.有了css3,针对移动端的垂直居中就更加多样化. 方法1:tab ...
- 实现css文字垂直居中的8种方法
CSS可以轻易实现文字的水平居中,但有时我们需要文字垂直居中,除了表格可以实现这种CSS文字垂直居中以外,还有其它几种方法可以做到 https://www.jb51.net/article/17825 ...
- CSS中垂直居中的七种方法
前言: 我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题 ...
- 使用 CSS 实现垂直居中的5种方法
在日常开发中,经常需要元素垂直居中或者水平居中,css水平垂直居中方法有很多种,下面列举几种常用的方法: <div class="parent"><div cla ...
- CSS水平垂直居中的几种方法
我们都知道,固定宽高的 div 在网页中水平垂直居中很简单,相信大家也很容易的写出来,但是不固定宽高的 div 如何水平垂直居中呢?我们在网页布局,特别是手机等 web 端网页经常是不固定宽高的 di ...
最新文章
- 五年程序员败在阿里三面,还是Java底层原理的问题啊!
- 使用salt-api来搭建salt自动化平台
- getpass 模块
- 1.8 finally和return的执行顺序
- 关于获取各种浏览器可见窗口大小(转载)
- python的两种循环结构_python分支和循环结构
- pytorch之trainer.zero_grad()
- 字符驱动之按键(四:poll机制)
- 知乎招聘搜索算法实习生!邀你共建知乎搜索引擎!
- Flutter根据偏移量转换角度 Offset 的使用实例
- GridViewDetailsView对XML文件增删改
- 解决mysql无法启动,错误1067
- PHP泡泡龙源码,JS泡泡龙游戏网页版+完整代码
- matlab 深度学习
- 14 英寸与 16 英寸 MacBook Pro 应该购买哪一款,M1 Pro 还是 M1 Max Mac?
- js修改css样式的方法,js如何设置css样式?js修改css样式的方法
- 创业公司研发团队面临的项目管理难题探讨
- Lyapunov稳定性分析3(离散时间系统)
- 大学生 计算机 毕业设计 xx管理系统 毕设(1)
- [今日阅读] [TSE 2019] - Mining Fix Patterns for FindBugs Violations
热门文章
- pycharm中无法import已经安装的ros中的库
- 【图像处理】——创建一个新的图片
- 车站计算机联锁系统的仿真设计,车站计算机联锁仿真设计.doc
- mysql to char 用法_postgresql 中的to_char()常用操作
- 二分查找法的循环与递归实现及时间复杂度分析
- matlab 读取excel一列,读取excel中的数据把第一列相同的所有行数据输出成一个excel...
- 环境变量_配置JAVA环境变量
- native react 常用指令_React Native入门基础篇(一)
- x86汇编语言-从实模式到保护模式----第五章
- CSS3动画@keyframes中translate和scale混用出错问题