外链论坛

 找回密码
 立即注册
搜索
查看: 122|回复: 4

这15种CSS居中的方式,你都用过哪几种?

[复制链接]

2992

主题

119

回帖

9915万

积分

论坛元老

Rank: 8Rank: 8

积分
99159260
发表于 2024-6-30 09:43:00 | 显示全部楼层 |阅读模式

CSS居中是前端工程师经常要面对的问题,是基本技能之一。今天有时间把CSS居中的方法汇编整理了一下,日前包含水平居中,垂直居中及水平垂直居中方法共15种。如有漏掉的,还会持续弥补进来。

水平居中

1.1内联元素水平居中

利用 text-align: center 能够此刻块级元素内部的内联元素水平居中。此办法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

.center-text {

text-align: center;

}

1.2块级元素水平居中

经过把固定宽度块级元素的margin-left和margin-right设成auto,就能够使块级元素水平居中。

.center-block {

margin: 0 auto;

}

1.3多块级元素水平居中

1.3.1 利用inline-block

倘若一行中有两个或两个以上的块级元素,经过设置块级元素的表示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。

.container {

text-align: center;

}

.inline-block {

display: inline-block;

}

1.3.2 利用display: flex

利用弹性布局(flex),实现水平居中,其中justify-content 用于设置弹性盒子元素在主轴(横轴)方向上的对齐方式,本例中设置子元素水平居中表示

.flex-center {

display: flex;

justify-content: center;

}

垂直居中

2.1 单行内联(inline-)元素垂直居中

经过设置内联元素的高度(height)和行高(line-height)相等,从而使元素垂直居中。

#v-box {

height: 120px;

line-height: 120px;

}

2.2 多行元素垂直居中

2.2.1 利用表布局(table)

利用表布局的vertical-align: middle能够实现子元素的垂直居中。

.center-table {

display: table;

}

.v-cell {

display: table-cell;

vertical-align: middle;

}

2.2.2 利用flex布局(flex)

利用flex布局实现垂直居中,其中flex-direction: column定义主轴方向为纵向。由于flex布局是CSS3中定义,在较老的浏览器存在兼容性问题。

.center-flex {

display: flex;

flex-direction: column;

justify-content: center;

}

2.2.3 利用“精灵元素”

利用“精灵元素”(ghost element)技术实现垂直居中,即在父容器内放一个100%高度的伪元素,让文本和伪元素垂直对齐,从而达到垂直居中的目的。

.ghost-center {

position: relative;

}

.ghost-center::before {

content: " ";

display: inline-block;

height: 100%;

width: 1%;

vertical-align: middle;

}

.ghost-center p {

display: inline-block;

vertical-align: middle;

width: 20rem;

}

2.3 块级元素垂直居中

2.3.1 固定高度的块级元素

咱们晓得居中元素的高度和宽度,垂直居中问题就很简单。通过绝对定位元素距离顶部50%,并设置margin-top向上偏移元素高度的一半,就能够实现垂直居中了。

.parent {

position: relative;

}

.child {

position: absolute;

top: 50%;

height: 100px;

margin-top: -50

回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-8-30 01:40:35 | 显示全部楼层
楼主的文章深得我心,表示由衷的感谢!
回复

使用道具 举报

2964

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109356
发表于 2024-10-9 09:47:07 | 显示全部楼层
谷歌网站排名优化 http://www.fok120.com/
回复

使用道具 举报

2878

主题

2万

回帖

9997万

积分

论坛元老

Rank: 8Rank: 8

积分
99979677
发表于 2024-10-22 08:30:22 | 显示全部楼层
外链发布论坛学习网络优化SEO。
回复

使用道具 举报

2990

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139314
发表于 2024-10-26 06:15:41 | 显示全部楼层
期待更新、坐等、迫不及待等。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

站点统计|Archiver|手机版|小黑屋|外链论坛 ( 非经营性网站 )|网站地图

GMT+8, 2024-11-5 12:22 , Processed in 0.078733 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.