如何用css来实现水平垂直居中,使用css实现水平垂直居中

1、通过absolute和margin实现(适用于弹窗，具体位置随浏览器屏幕大小变化改变)

这种方式需要居中元素的父级必须采用绝对定位或相对定位，被居中元素的尺寸需要固定。

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的高度需要和父级的高度一样。

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实现

这种方式一般用于行内元素。

css样式如下：

.frame{

width:400px;

height:400px;

text-align:center;

line-height:400px;

}

.frame-child{

display:inline-block;

}

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

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

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

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

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

css各种水平垂直居中

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

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

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

CSS如何水平垂直居中？

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

随机推荐

浅谈Hibernate入门

前言 最近打算做一个自己的个人网站,经过仔细思考,打算使用hibernate作为开发的ORM框架,因此各种找资料,由于本人是刚刚接触这技术的,所以就找了比较基础的知识来分享下 基本概述 Hiberna ...

WINDONWS7+VS2012+Cocos2d-x

一:准备工作 准备下载文件 1.VS2012,到处都有咱就不发链接了. 2.Cocos2d-x的最新版本 http://www.cocos2d-x.org/projects/cocos2d-x/wik ...

Codeforces Round #354 (Div. 2) C. Vasya and String

题目链接: http://codeforces.com/contest/676/problem/C 题解: 把连续的一段压缩成一个数,对新的数组求前缀和,用两个指针从左到右线性扫一遍. 一段值改变一部 ...

Beaglebone Back学习一(开发板介绍)

随着开源软件的盛行.成熟,开源硬件也迎来了春天,先有Arduino,后有Raspherry Pi,到当前的Beaglebone .相信在不久的将来,开源项目将越来越多,越来越走向成熟.         ...

SQL-LINQ-Lambda语法对照

SQL LINQ Lambda SELECT *FROM HumanResources.Employee from e in Employees select e Employees .Select ...

在Eclipse中调用Algs4库

首先下载Eclipse,我选择的是Eclipse IDE for Java Developers64位版本,下载下来之后解压缩到喜欢的位置然后双击Eclipse.exe启动 然后开始新建项目,File ...

【ES6】Generator+Promise异步编程

一.概念 首先我们要理解Generator和Promise的概念. Generator:意思是生成器,可以在函数内部通过yeild来控制语句的执行或暂停状态. *Foo(){ yeild consol ...

如何将wordpress所有文章批量改为已发布状态

用wordpress建站的一个好处就是bd站长工具平台上有数据结构插件,可以认为bd默认支持wp发展,另外一种建站程序是discuz.我们在用wordpress发布文章时,特别是那种多用户投稿的文章一 ...

unity 优秀开源项目

ihaiu.GUIDRef (查看项目资源使用情况) http://blog.ihaiu.com/unity-GUIDRef Ihaiu.PoolManager (对象池) http://github ...

vs2015 xamarin 添加智能感知

下载 由于未安装 Xamarin Studio, 不存在android-layout-xml.xsd . schemas.android.com.apk.res.android.xsd 文件. 所以在 ...