CSS里的各种水平垂直居中基础写法心得总结

介绍一下行内元素和块级元素,这个很重要,因为有的属性只能用于块元素,而有的正好相反,在一定的情况下,它们也可以相互转换,比如用display来进行设置。

常用的内联元素有
a - 锚点
b - 粗体(不推荐)
br - 换行
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
label - 表格标签
select - 项目选择
small - 小字体文本
span - 常用内联容器,定义文本内区块
strike - 中划线
strong - 粗体强调
行内元素(又叫内联元素inline element):
①不占据一整行,随内容而定,有以下特点:
②不可以设置宽高,也不可以设置行高,其宽度随着内容增加,高度随字体大小而改变。
③内联元素可以设置外边界,但是外边界不对上下起作用,只能对左右起作用。
④也可以设置内边界,但是内边界在ie6中不对上下起作用,只能对左右起作用。

常用的块级元素有
div -最常用的块级元素
dl - 和dt dd搭配使用的块级元素
form - 交互表单
h1 - 大标题
hr - 水平分隔线
ol - 排序表单
p - 段落
ul - 非排序列表

块级元素block element特点:
①总是在新行上开始,占据一整行;
②高度,行高以及外边距和内边距都可控制;
③宽带始终是与浏览器宽度一样,与内容无关;
④它可以容纳内联元素和其他块元素。

互相转换:使用display设置可以使得行内元素拥有块级元素的特性,反之也可以。
如: <p style="display:inline; text-align:center">我是被设置了内联的块元素p,我现在的表现形式和内联元素一样啦</p>
<span style="display:block; text-align:center">我是被设置了块级元素的span,我现在可以独占一行并且可以设置宽高</span>
display: table-cell ,能把元素当作表格单元来显示,这个非常实用,显示效果也很好,只可惜某些浏览器不够兼容。要注意,和一个合法的<td>元素必须在<table>里一样, display: table-cell 元素必须作为 display: table 的元素的子元素出现。

现在开始说一下简单的几种基础的居中方式
1.1. 块中文字水平居中:text-align 用于块级元素,作用在使用它的块元素中的文字或者图片上。使得它们在水平方向上居中。
这个属性只能作用于块元素(或者被CSS控制为块元素的内联元素,但是被控制为内联元素的块元素是不行的)。一句话来说,就是要拥有块元素的特点的那些元素。这个很好理解,居中,肯定是行居中,如果使用它的元素本身不拥有完整的在宽度上的独立空间,它当然没有能力让它内部的文字或者图片居中。(难道要占用别人的地盘里居中,岂不混乱啦)
例子:
<p style="text-align:center">我是正常p,我设置了居中</p> <span style="display:block; text-align:center">我其实是一个行内元素span哦,我设置了居中,可以居中并且独占一行</span> <p style="display:inline; text-align:center">能不能再同一行,我是被inline了的p,我设置了居中可是不能居中!</p>
父元素的这个属性对它下面的子元素也起作用,比如一个div设置了text-align居中,则它内部的文字可以居中,它的子div内部的文字也可以居中。但是子元素中文字的居中,是在子div中居中,而不是对于父div居中。也就是,它里面所有的文字,都会相对于最靠近自己的一层div来实现居中。所以,这个属性不能用于div在父div中的整体居中。(不仅仅是div,所有的表现为块元素的元素)。

下面的这段代码,外面一个大的蓝色的div,里面一个小的红色的div。外部的div设置了水平居中,按说里面的图片肯定会居中(运行时确实显示居中), 而内部的div只设置了vertical-align,垂直居中(先不管它)。可是因为它父层的text-align对它也有影响,所以运行时,里面的文字会相对于内部div而居中(注意!不是相对于最外面的div)

代码如下:
<div style="width:500px; height:200px; text-align:center">   
<img src="dog/134906m121hqwumyw3uudc.jpg" width="96" height="80" />  
<div style="width:100px; height:50px; display: table-cell;vertical-align:middle">啦啦啦</div>  
</div>

Paste_Image.png

(1)]这个是块元素对内处理的一个属性,不能把这个块自己在它的父容器中居中,若要实现块在父元素中的居中,可以使用:
2 2. 块元素自身水平居中(确定设置了宽度的块):margin。这个肯定是接触CSS一开始就知道的了。
一般情况下,可以设置margin:0 auto;这会使这个块级元素在它的父级元素中居中,上下左右都会居中。
如果只要水平居中的话,就设置margin-left:auto;margin-right:auto;
3 3. 块元素自身水平居中(不确定宽度的块):   
在其他的一些文章中,看到有不少方法来介绍不确定宽度的块的居中的。   
其实简单点说,不需要这么麻烦。我们可以这样来理解,没有明确设定宽度的block,根据块级元素的性质,它默认是独占一行的,所以这个时候block本身就是浏览器窗口的宽度,就不必要来设置水平居中了。
  
若是此时对块中的内容进行居中的话:   
如果块元素的子元素也为块元素,就对子元素使用margin auto一类的方式就好啦;   
如果块级元素的子元素为行内元素,就用我们一开始介绍的text-align也就可以解决;   
对于子元素为块元素的,也可以用display设置为inline然后再用text-align。 (这些在本文其他地方也都说过了)
4 4. vertical-align用于行内元素中的垂直居中
vertical-align,这个可以用的很复杂。看了一些文章和例子,自己也有点小混乱,只说一下最简单的用法:   
这个属性用于   
1、内联元素(以及被转化为内联元素的块元素)   
2 、display设置为table-cell的元素,   
在 firefox 和 ie8 下,可以设置块级元素的 display 值为 table-cell,来激活 vertical-align 属性,显示效果和就和表格中的 valign="center" 一样了。但 ie6,7 并不支持。   
3、<td><tr>这样的元素   
这样的写法:vertical-align:middle;就可以设置文字或者图片的垂直居中。只要具有行内元素的特性的元素使用这个属性,对它的子元素中的文字和图片也是起作用的。但是作用效果为使得文字或者图片相对于紧靠着它们的父元素来进行居中。这个和text-align上面说过的部分是类似的。
5 5. 块级元素中的文字图片垂直居中(针对块的高度确定的,这个是从另一个博客上看到的,真的很实用哦,如果块内只有这些文字的话)
文字在层(块级元素)中垂直居中vertical-align 属性是做不到的.我们这里有个比较巧妙的方法就是:设置height的高度与line-height的高度相同!

代码如下:
<div style="line-height:500px;height:500;"></div>

6 6.##块级元素中的文字图片垂直居中(块的高度不确定的)   
在块的高度不确定的情况下,其实它的高度就是取决于里面内容的高度。如果内部只有文字或者图片的话,那就自然垂直居中了,其实就不必特意要设置。
如果非要设置什么的话,比如希望块大一些,文字在块中垂直居中好看一点,可以设置内边距,如padding-top:20px;padding-bottom:20px;   
当然,如果上下内边距设置的不一样,就自然不居中了。

7 7. ####块级元素自身的垂直居中  
设置块级元素自身在父元素中的垂直居中,可以参照块级元素的水平居中的方法(上面说过),设置外边距即可。如果不想设置水平居中,只要设置上下外边距为auto就好。
也可以采用vertical-align:middle;的方式,但是前提是把display设置为table-cell。这样的话要注意浏览器兼容性问题。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容

  • �这里涉及到行内元素和块级元素。 行内元素和块级元素可以相互转换,比如用display来进行设置。 行内元素(又叫...
    忆飞阅读 574评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,725评论 1 92
  • CSS格式化排版 1、字体 我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例...
    张文靖同学阅读 1,270评论 0 3
  • 收听音频,戳链接,旧号itclan已暂停使用,欢迎关注微信itclanCoder公众号可收听更多音频 前言 关于网...
    itclanCoder阅读 8,154评论 3 30
  • 本文主要是起笔记的作用,内容来自慕课网. 认识CSS样式 CSS全称为“层叠样式表 (Cascading Styl...
    0o冻僵的企鹅o0阅读 2,613评论 0 30