CSS怎么实现元素居中

　　介绍

这篇文章将为大家详细讲解有关CSS怎么实现元素居中,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

在CSS中要设置元素水平垂直居中是一个非常常见的需求了。但就是这样一个从理论上来看似乎实现起来极其简单的,在实践中,它往往难住了很多人。

让元素水平居中相对比较简单:如果它是一个行内元素,就对它的父元素应用text-align:中心;如果它是一个块级元素,就对它自身应用保证金:汽车。

然而如果要对一个元素进行垂直居中,那就没有那么容易了,有时候光是想想就令人头皮发麻了。

本文分别从行内元素和块级元素进行说明,将目前比较流行的实现方式进行汇集并解析实现原理,方便大家查阅。这里要说明一点,每一种方式都不是十全十美的,关键要看自己的需求,从而分析出哪种实现方式是最合适的。

<强>行内元素

首先我们先把基础代码写出来:

& lt; div 类=癿ain"比; 　　,,,& lt; span 类=癱ontent"在我是要居中的行内元素span 　　& lt;/div> .main  { 　　,,,宽度:,300 px; 　　,,,身高:,300 px; 　　background - color,,,,, # 50 ba8b; 　　} 　　 　　.content  { 　　background - color,,,,, # 5 b4d4e; 　　,,,颜色:,# FFFFFF; 　　}

类为.main的div包裹这一个类为.content的行内元素,我们的目的就是要让.content元素在.main元素中居中。

<强>水平居中

<强> text-align

行内元素的水平居中比较简单,我们直接在.main中添加text-align:中心;即可,此时.main变为:

.main  { 　　,,,宽度:,300 px; 　　,,,身高:,300 px; 　　background - color,,,,, # 50 ba8b; 　　,,,, 　　,,,text-align:,中心;,,/*,水平居中,*/}

实现原理:设置text-align的值为中心,因为该属性规定元素中的文本的水平对齐方式,那么设置为中心则文本就水平居中了。

<强>垂直居中

<强>行高

行内元素的垂直居中我们分为一行和多行或者图片等替换元素来说明。

如果是一行,那么我们可以使用行高来实现,此时.main元素css代码变为:

.main  { 　　,,,宽度:,300 px; 　　,,,身高:,300 px,,/*,可以不设置,*/background - color,,,,, # 50 ba8b; 　　 　　,,,行高:,300 px,,/*,垂直居中,*/}

其实设置了行高就可以让文本垂直居中,并不需要同时设置高度,这里也是一直存在的一个误区。

实现原理:这种方式实现垂直居中运用的是CSS中“行距的上下等分机制”,这也说明了为什么该方式只适用于一行的文本。

还有一点需要说明是,这种方式实现的垂直居中是“近似”的,并不是完美的垂直居中,因为文字字形的垂直中线位置普遍要比真正的“行框盒子”的垂直中线位置低,而由于我们平时使用的字体大小比较小,使得这点偏差不容易察觉出来,那么感官上也就看成是垂直居中了。

<强>行高及vertical-align

下面再来说说多行或者图片等替换元素的垂直居中效果实现,这里我们需要同时借助行高和vertical-align来实现。

先让文本换行:

& lt; div 类=癿ain"比; 　　,,,& lt; span 类=癱ontent"比; 　　,,,,,,,我是要居中的行内元素span  & lt; br> 　　,,,,,,,我是要居中的行内元素 　　,,,& lt;/span> 　　& lt;/div>

再看修改之后的css代码:

.main  { 　　,,,宽度:,300 px; 　　background - color,,,,, # 50 ba8b; 　　 　　,,,行高:,300 px; 　　} 　　 　　.content  { 　　,,,显示:,inline-block; 　　background - color,,,,, # 5 b4d4e; 　　,,,颜色:,# FFFFFF; 　　,,,行高:,20 px; 　　,,,保证金:,0,20 px; 　　,,,vertical-align:,中间; 　　}

实现原理:

<李>

设置.content元素的显示为inline-block。作用在于既能重置外部的行高为正常大小,又能保持行内元素特性,从而可以设置vertical-align属性,以及产生一个非常关键的“行框盒子”。我们需要的其实并不是这个“行框盒子”,而是每个“行框盒子”都会附带的一个产物和终止,和终止,“幽灵空白节点”,即一个宽度为0,表现如同普通字符的看不见的“节点”。有了这个“幽灵空白节点”,我们的行高:300 px;就有了作用的对象,从而相当于在.content元素前面撑起了一个高度为300 px的宽度为0的行内元素。

<李>

因为行内元素默认都是基线对齐的,所以我们通过对.content元素设置vertical-align:中间;来调整多行文本的垂直位置,从而实现我们想要的“垂直居”中效果。这种方式也适用于图片等替换元素的垂直居中效果。当然这里的“垂直居”中也是近似的,这是由于vertical-align导致的,具体为什么可以深入了解vertical-align:中间;。

CSS怎么实现元素居中