CSS之元素水平居中

html-css010

CSS之元素水平居中,第1张

我们以一个面试题开始吧

这道题看似貌似很简单,但是我们需要分析具体的场景,因为不同的显示方式的使用利弊是不一样的。

以下的讨论都是子元素相对于其父元素的水平居中。垂直居中,以后会说到。

常见的行内元素有 span img 等,对这些元素居中设置,只需要在父元素的css中添加 text-align:center 即可。同样它也对行内块元素也是有效的。

但是,有个缺点,由于 text-align 是可继承属性,即父元素内部的所有元素都会继承这个属性,从而它的子元素内部的文本都会居中显示了。因此需要对子元素的文本居中方式单独设定。

针对块级元素的居中,我们将分为定宽和不定宽两种情况来讨论。

1.定宽

(1)子元素是正常流布局

若子元素的宽度是已知的,那么我们可以设置子元素的左右 margin 为 auto 即可

行内块元素也算块级元素,同样适用

目前所有浏览器都是支持的

(2)子元素绝对定位布局(absolute)

如果子元素是绝对定位的,由于子元素此时是脱离文档流,上面的方法就失效了。这时需要明确指出子元素的定位,四个方位均要指定。如下:

这样也可以实现绝对定位元素的居中。原因可点击 这里 。如果绝对定位子元素的margin为auto,你会发现它水平垂直居中了!此方法仅适用于IE8+浏览器中,IE7就挂了,不过你可以下面这个方法:

2.不定宽

不定宽元素如果要居中需要额外的辅助手段

(1)css3新特性 transform

如果你对浏览器并没有什么特别要求,那么可以使用css3提出的新属性 transform 完成居中需求

这里需要子元素是绝对定位

(2)借助table元素

上面定宽元素设定左右margin为auto之所以可以居中,原因是左右margin会平分父元素剩下的空间。有个元素除外,那就是tabel元素。table有趣的地方在于它本身并不是块级元素,如果不给它设定宽度的话,它的宽度由内部元素的宽度“撑起”,但即使不设定它的宽度,仅设置margin-left:auto和margin-right:auto就可以实现水平居中。

最大的缺点想必你也是知道,就是无关标签太多,加深了嵌套的层级,维护性很差。

(3)父元素使用float布局

这里需要多添加一层父元素,父子元素均float布局,之后设置position为relative,left为50%

缺点是你需要额外处理浮动所带来的一些问题。并且如果你设置了背景色,布局会有些混乱

以上是我对元素实现居中的一些方法,欢迎大家补充。

2017.6.11 晴

于上海浦东

水平居中

若是行内元素, 给其父元素设置 text-align:center,即可实现行内元素水平居中.

若是块级元素, 该元素设置 margin:0 auto即可.

若子元素包含 float:left 属性, 为了让子元素水平居中, 则可让父元素宽度设置为fit-content,并且配合margin, 作如下设置:

.parent{

width: -moz-fit-content

width: -webkit-fit-content

width:fit-content

margin:0 auto}

使用flex 布局, 可以轻松的实现水平居中, 子元素设置如下:

.son{

display: flex

justify-content: center}

使用CSS3中新增的transform属性, 子元素设置如下:

.son{

position:absolute

left:50%

transform:translate(-50%,0)}

使用绝对定位方式, 以及负值的margin-left, 子元素设置如下:

.son{

position:absolute

width:固定

left:50%

margin-left:-0.5宽度}

使用绝对定位方式, 以及left:0right:0margin:0 auto子元素设置如下:

.son{

position:absolute

width:固定

left:0

right:0

margin:0 auto}

垂直居中

若元素是单行文本, 则可设置 line-height 等于父元素高度

若元素是行内块级元素, 基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块处于容器中央.

.parent::after, .son{

display:inline-block

vertical-align:middle}.parent::after{

content:''

height:100%}

元素高度不定

可用 vertical-align 属性, 而vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cellvertical-align:middle

用 Flex 布局

.parent {

display: flex

align-items: center}

可用 transform , 设置父元素相对定位(position:relative), 子元素如下css样式:

.son{

position:absolute

top:50%

-webkit-transform: translate(-50%,-50%)

-ms-transform: translate(-50%,-50%)

transform: translate(-50%,-50%)}

元素高度固定

设置父元素相对定位(position:relative), 子元素如下css样式:

.son{

position:absolute

top:50%

height:固定

margin-top:-0.5高度}

设置父元素相对定位(position:relative), 子元素如下css样式:

.son{

position:absolute

height:固定

top:0

bottom:0

margin:auto 0}