1、通过absolute和margin实现(适用于弹窗,具体位置随浏览器屏幕大小变化改变)
这种方式需要居中元素的父级必须采用绝对定位或相对定位,被居中元素的尺寸需要固定。
<div class="frame">
<div class="frame-child"></div>
</div>
css样式如下:
.frame{
position:relative;
width:400px;
height:400px;
}
.frame-child{
position:absolute;
width:200px;
height:100px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-50px;
}
2、通过text-align、vertical-align和inline-block来实现
这种方式需要借助一个依托dom来实现,父级尺寸需要给定。依托dom的高度需要和父级的高度一样。
<div class="frame">
<div class="frame-child"></div>
<div class="frame-operate"></div>
</div>
css样式如下:
.frame{
width:600px;
height:400px;
text-align:center;
}
.frame-child{
display:inline-block;
height:200px;
vertical-align:middle;
}
.frame-operate{
display:inline-block;
height:100%;
vertical-align:middle;
}
3、通过line-height,text-align实现
这种方式一般用于行内元素。
<div class="frame">
<div class="frame-child"></div>
</div>
css样式如下:
.frame{
width:400px;
height:400px;
text-align:center;
line-height:400px;
}
.frame-child{
display:inline-block;
}

使用css实现水平垂直居中的更多相关文章

  1. CSS实现水平|垂直居中漫谈

    利用CSS进行元素的水平居中,比较简单,手到擒来:行级元素设置其父元素的text-align center,块级元素设置其本身的left 和 right margins为auto即可.而撸起垂直居中, ...

  2. 纯CSS制作水平垂直居中“十字架”

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. CSS制作水平垂直居中对齐

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀 ...

  4. CSS实现水平垂直居中的1010种方式

    转载自:CSS实现水平垂直居中的1010种方式 划重点,这是一道面试必考题,很多面试官都喜欢问这个问题,我就被问过好几次了 要实现上图的效果看似很简单,实则暗藏玄机,本文总结了一下CSS实现水平垂直居 ...

  5. 你知道CSS实现水平垂直居中的第10种方式吗?

    你知道CSS实现水平垂直居中的第10种方式吗? 仅居中元素定宽高适用: absolute + 负 margin absolute + margin auto absolute + calc 居中元素不 ...

  6. css实现水平 垂直居中

    css实现水平居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...

  7. CSS制作水平垂直居中对齐 多种方式各有千秋

    作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋 ...

  8. css各种水平垂直居中

    css各种水平垂直居中,网上查了一下,总结以下几种 line-height垂直居中 缺点,仅限于单行文字 .item{ text-align: center; height: 100px; line- ...

  9. CSS实现水平垂直居中的数种方法整合

    CSS实现水平垂直居中可以说是前端老生常谈的问题了,一般面试官问的时候面试者都会回答出来,但是继续追问还有没有其他方法的时候有可能就说不出来了. 本着学习知识的目的,特在此纪录CSS实现水平垂直居中的 ...

  10. CSS如何水平垂直居中?

    CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...

随机推荐

  1. git rebase 理解

    摘录自:https://blog.csdn.net/wangnan9279/article/details/79287631

  2. AbstractList

    概述 此类提供 List 接口的骨干实现,以最大限度地减少实现“随机访问”数据存储(如数组)支持的该接口所需的工作.对于连续的访问数据(如链表),应优先使用 AbstractSequentialLis ...

  3. centos7主机间免密登录、复制文件

    下面实例为三个节点间 1.分别在三个节点设置域名映射 vi /etc/hosts  在文件末尾追加 192.168.10.121 node1 192.168.10.122 node2 192.168. ...

  4. SPFA队列优化

    spfa队列优化(用来求最短路) 实现方法: 1.存入图.可以使用链式前向星或者vocter. 2.开一个队列,先将开始的节点放入. 3.每次从队列中取出一个节点X,遍历与X相通的Y节点,查询比对   ...

  5. codeforces 340 A. The Wall

    水水的一道题,只需要找xy的最小公倍数,然后找a b区间有多少个可以被xy的最小公倍数整除的数,就是答案. //============================================ ...

  6. 闯荡Ext-第一篇

    今天在网上找到了一本非常好的书:<Ext江湖>,这本书是由大漠穷秋大神写的,刚看到这本书的时候,心里面的那个激动劲啊,本来原先的时候心里面就一直念叨着想要学习Ext,但是苦于找不到好的资料 ...

  7. javascript中的浅拷贝和深拷贝(拷贝引用和拷贝实例)

    作者:千锋教育链接:https://www.zhihu.com/question/23031215/answer/326129003来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请 ...

  8. mvnjar包冲突解决方法

    命令 mvn dependency:tree -Dverbose 结果: [INFO] +- com.esotericsoftware:kryo:jar:4.0.2:test [INFO] | +- ...

  9. 大话 Spring Session 共享

    javaweb中我们项目稍微正规点,都会用到单点登录这个技术.实现它的方法各家有各界的看法.这几天由于公司项目需求正在研究.下面整理一下最近整理的心得. 简介 在分布式项目中另我们头疼的是多项目之间的 ...

  10. element ui 登录验证,路由守卫

    <template> <!-- el-form :label-position="labelPosition" 设置label的位置 :model 用来给表单设置 ...