文档章节

CSS垂直居中的6种方法

小星星_cjx
 小星星_cjx
发布于 2017/05/03 09:55
字数 344
阅读 5
收藏 0

1、单行文本垂直居中

html:

<div id="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.child{line-height: 200px}

    垂直居中一张图片

html:

<div class="parent">
    <img src="image.png" alt="">
</div>

css:

.parent{line-height: 200px;border:1px solid #000;}
.parent img{vertical-align: middle}

2、css table 方法

html:

<div class="parent">
    <div class="child">text here</div>
</div>

css:

.parent{display: table;border: 1px solid #000;height: 100px;}
.child{display: table-cell;vertical-align: middle}

 低版本的IE fix bug:

.child{display:inline-block}

3、absolute positioning and negative margin,块级元素

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

 css:

.parent{position:relative;border: 1px solid #000;height: 100px;width: 400px;}
.child{position: absolute;top:50px;left: 200px;height: 30px;width: 50px;
       border: 1px solid #000;margin: -15px 0 0 -25px;}
    

4、absolute positioning  and stretching,通用,>=IE7版本

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.parent{position:relative;border: 1px solid #000;height: 100px;width: 400px;}
.child{position: absolute;top:0;left: 0;right: 0;bottom:0;height: 30px;width: 50px;
       border: 1px solid #000;margin: auto;}
    

 5、equal top and bottom padding,通用

html:

<div class="parent">
    <div id="child"> 
        text here
    </div>
</div>

css:

.parent{padding: 5% 0;border: 1px solid #000;height: 100px;width: 400px;}
.child{padding: 10% 0;height: 30px;width: 50px;border: 1px solid #000;margin: 0 auto;}

6、float div 通用

html:

<div class="parent">
    <div class="floater"></div>
    <div class="child">text here</div>
</div>

css:

.parent{border: 1px solid #000;height: 250px;width: 400px;}
.floater{float: left;height:50%;width: 100%;margin-bottom: -50px;}
.child{clear:both;height: 100px;border:1px solid #000;}

 

© 著作权归作者所有

共有 人打赏支持
小星星_cjx
粉丝 1
博文 33
码字总数 29685
作品 0
深圳
前端工程师
一些CSS方面的知识

1.学习CSS"盒子模型"(上):http://www.108js.com/article/article8/80058.html?id=1766 2.学习CSS"盒子模型"(下):http://www.108js.com/article/article8/80059.html?id=1767 3.css知多......

IT追寻者
2016/06/23
31
0
前端秘籍,看程序员如何用九个招式,搞定css水平居中

CSS水平居中 text-align:center是前端工程师的基本功,我在项目中经常遇到CSS水平居中的需求,这篇教程将我以往用过的9种CSS实现水平居中的方法总结出来,也方便日后再用到时回顾。 工具/原料...

ToEnd
05/11
0
0
CSS实现水平垂直居中的10种方式(史上最全)

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

颜海镜
09/13
0
0
16种方法实现水平居中垂直居中

熟悉水平居中和垂直居中的方法, 不为别的, 就为用的时候能够信手拈来. 下面直接步入正题. 水平居中 若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中. 若是块级元素...

tomzhangto
2017/12/19
0
0
[译文]CSS的水平/垂直居中:一篇完整的指南

原文:Centering in CSS: A Complete Guide 在CSS中居中是(开发者)抱怨CSS设计的代表问题之一。有人嘲笑说:这有什么困难的呢?我认为,难度不在于解决问题,而在于有如此多的不同解决方法...

huangpin815
2017/09/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

区块链100讲:盘点那些常用的加密算法原理

在开发过程中,常常用到各种加密方法和算法,本文总结了几种常用加密方法的原理。 1 对称加密 原理:加密和解密数据使用同一个密钥,适合对大量数据进行加解密 安全性:关键是密钥的保存方式...

HiBlock
31分钟前
0
0
zookeeper基本常识

一、Zookeeper基础知识 1 zookeeper是一个类似hdfs的树形文件结构,zookeeper可以用来保证数据在(zk)集群之间的数据的事务性一致。2 zookeeper有watch事件,是一次性触发的,当watch监视的数...

啃不动地大坚果
36分钟前
0
0
Forrester企业级容器平台权威排行出炉,小初创Rancher缘何成为领导者?

全球著名的调研机构Forrester Research近日发布了《The Forrester New Wave: Enterprise Container Platform Software Suites, Q4 2018》报告,对企业级容器平台(ECP)市场进行全面评估,希...

RancherLabs
40分钟前
0
0
【三 异步HTTP编程】 2. 流式HTTP响应

标准响应及Content-Length头 自HTTP1.1以来,服务器为了在一个链接中处理多个HTTP请求及响应,必须随response一起返回合适的Content-Length值。 默认情况下,对于简单请求你无需返回 Conten...

Landas
今天
0
0
Java后端技术栈,到底如何深入学习?

Java,是现阶段中国互联网公司中,覆盖度最广的研发语言。有不少朋友问,如何深入学习Java后端技术栈,今天分享一个,互联网牛人整理出来的Java深入学习路线图,以及免费学习资料。 一 。性能...

别打我会飞
今天
2
1

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部