CSS垂直和水平居中
在css中,居中使用十分频繁。
居中分为水平和垂直居中
水平居中十分简单:
body{
background:#f90;
}
body统一为这个颜色
div {
margin:0 auto;
background:green;
width:10em;
text-align:center;
}
<div>
hello world
</div>
注意width是必须设定的,否则如果是块级元素(div)则会占用一行,没有什么居中可言,如果是行内元素(span)则会不起作用,也无居中可言
效果:
关于垂直居中,这个就有意思了,虽然使用不像水平那么多,但是要用到的时候确实比水平的复杂多了,根据《css权威指南》中代码(有改动):
这是行内元素:
b{
position:absolute;
left:;
right:;
top:;
bottom:;
height: 5em;
margin:auto 0;
background:silver;
}
<b>hello world</b>
效果:
注意到:灰色部分垂直居中了
经过分析,其中这几行是必备:
position: absolute;
top: 0;
bottom: 0;
height: 5em;
margin: auto 0;
首先元素必须为absolute,然后top,bottom同时设置为0,让元素既无法停靠在上边界,也无法停靠在下边界
另外注意:这里实现的垂直居中效果其实是用户代理(浏览器)补全margin实现的,也就是,因为,top,bottom都为0,而元素height只有5em,浏览器就自己补全了剩下的空白,是margin-top,margin-bottom填充了上下
然后与水平居中对应,垂直居中是height必备,否则会是这样的:
元素被top和bottom两个css属性拉伸了
(块级元素同理)
注意:
由于垂直居中使用到了absolute的定位,所以,其他元素将被覆盖:
CSS垂直和水平居中的更多相关文章
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- css确定元素水平居中和垂直居中
---恢复内容开始--- 首先,我们在了解如何通过css了解元素水平和垂直居中之前,先要了解下html都有哪些元素,这些元素与偶有哪些分类,因为不同类别的元素的水平垂直居中方法是完全不同的,究其根本当 ...
- css图片居中(水平居中和垂直居中)
css图片居中(水平居中和垂直居中) css图片居中分css图片水平居中和垂直居中两种情况,有时候还需要图片同时水平垂直居中,下面分几种居中情况分别介绍. css图片水平居中 利用margin: 0 ...
- CSS垂直水平居中方法总结
在布局的时候经常能用到居中,在此总结一下 html结构: <div class="wrap"> <div class="content"> ...
- css中各种情况下的元素的垂直和水平居中的问题
问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器垂直水平居中显示?? No1: 外边的容器宽度和高度确认,里边是行内元素 .container{width:200px; height ...
- 探究css中各种情况下的元素的垂直和水平居中的问题(面试题)
今天各种纠结,真的是不想写东西(ps 我比较懒)但是老是有人问这个问题,于是我就本着分享精神还是整理一下,好了废话不多说 开始上代码 问题:外边是一个容器,容器中还有一个容器,那么请问怎么让里边的容器 ...
- 关于css垂直水平居中的几种方式
css中元素的垂直水平居中是比较常见及较常使用的,在这里向大家介绍一下几种方式. 1.水平居中 margin: 0 auto; 效果图: 而文字的垂直水平居中也比较简单,加上line-height: ...
- css 垂直水平居中总结
一.前言: 垂直居中有很多方式,我们要做的不是写出完美代码,而是在合适的情况下根据需求选择合适方式. 主要方式: line-height 绝对定位 表格 display:table-cell 主要需求 ...
- css样式—字体垂直、水平居中
“来,老板娘,给个div瞅瞅”: “好的,宇哥,来了了了”: <div class="tt">啦啦啦</div> “给各样啊,我去”: “是”: .tt{ ...
随机推荐
- python中的I/O
先看比较简单的,标准输入输出流 输出到表屏幕: >>>str = "hello, python" >>>print "content: ...
- JDBC(上)
1. 课程回顾 mysql加强 1)数据约束(表约束) 默认值: default 默认值 非空: not null 唯一: unique 主键: primary key (非空+唯一) 自增长: ...
- Android开发之自定义视图
继承View 1.重写onMeasure(int wMeasureSpec,int hMeasureSpec)处理程序,这样可以标明视图尺寸 2.重写onDraw,以便绘制我们自己的自定义视图内 3. ...
- CSS中的剪裁和遮罩
剪裁和遮罩都是用来隐藏元素的一些部分.显示其他部分的.当然了,这两者还是有区别的.区别主要在于这几方面:他们能做的东西,不同的语法,涉及到的不同技术,是新的还是旧的,以及浏览器支持的差异. 但不幸的是 ...
- Spark技术在京东智能供应链预测的应用
1 背景 前段时间京东公开了面向第二个十二年的战略规划,表示京东将全面走向技术化,大力发展人工智能和机器人自动化技术,将过去传统方式构筑的优势全面升级.京东Y事业部顺势成立,该事业部将以服务泛零售为核 ...
- C语言::模拟实现strlen函数
题目要求 编写一个C语言程序模拟实现strlen函数. 算法 strlen函数功能是计算字符串中字符的个数.(除\0外) 而字符串本身就是一个字符数组,只不过末尾以\0结束. 因此,我们只需遍历除\0 ...
- (一) 这就是所谓的Node.js------单线程,非阻塞,事件驱动
Node.js 第一天笔记(V1) 一:Node.js到底是从何而来 2008年的秋天,一个名叫做Ryan Dahl(罗伊・达尔)的年轻人在玩了几年服务器编程之后,越发感到服务器高并发性能的瓶颈是一个 ...
- 读书笔记 effective c++ Item 43 了解如何访问模板化基类中的名字
1. 问题的引入——派生类不会发现模板基类中的名字 假设我们需要写一个应用,使用它可以为不同的公司发送消息.消息可以以加密或者明文(未加密)的方式被发送.如果在编译阶段我们有足够的信息来确定哪个信息会 ...
- Oracle DBA管理包脚本系列(二)
该系列脚本结合日常工作,方便DBA做数据管理.迁移.同步等功能,以下为该系列的脚本,按照功能划分不同的包.功能有如下: 1)数据库对象管理(添加.修改.删除.禁用/启用.编译.去重复.闪回.文件读写. ...
- SystemVerilog搭建验证平台使用DPI时遇到的问题及解决方案
本文目的在于分享一下把DPI稿能用了的过程,主要说一下平台其他部分搭建好之后,在完成DPI相关工作阶段遇到的问题,以及解决的办法. 工作环境:win10 64bit, Questasim 10.1b ...