外链论坛

 找回密码
 立即注册
搜索
查看: 75|回复: 3

css-水平居中、垂直居中、水平垂直居中办法

[复制链接]

2928

主题

412

回帖

9117万

积分

论坛元老

Rank: 8Rank: 8

积分
91179345
发表于 2024-6-30 05:52:19 | 显示全部楼层 |阅读模式

首要呢先介绍下居中的办法都有那些

1.文字水平垂直居中代码片段

<!-- html部分 --> <div class="center">文字水平垂直居中</div>/* css部分 */ .center{ text-align: center; width: 300px; height: 200px; bac公斤round: indianred; line-height: 200px; }

2.行内元素水平居中

//html部分: <div class="center">水平居中</div>/* css部分 */ .center{ text-align: center; }

3.块级元素水平居中

1.定宽元素水平居中

只需给必须局中的块级元素加margin:0 auto,

这儿必须重视的是,这儿的块元素的宽度width值要有
html部分 <div class="center">水平居中</div> css部分 .center{ width:200px; magin: 0 auto; border:1px solid red; }

1.2.不定宽块级元素水平居中

不定宽,便是块级元素宽度不固定

办法1:设置table,经过给要居中表示的元素,

设置display:table,而后设置margin:0 auto来实现
<!-- html部分 --> <div class="center">水平居中</div>/* css部分 */ .center{ display: table; margin: 0 auto; border: 1px solid red; }

1.3.设置inlie-block(多个块元素)

子元素设置inline-block,同期父元素设置text-align:center

<!-- html部分 --> <div class="center"> <div class="inlineblock-div">1</div> <div class="inlineblock-div">2</div> </div>/* css部分 */ .center{ text-align: center; } .inlineblock-div{ display: inline-block; }

1.4.设置flex布局

只需把要处理的块元素的父级设置display:flex,justify-content:center;

<!-- html部分 --> <div class="center"> <div class="flex-div">1</div> <div class="flex-div">2</div> </div>/* css部分 */ .center{ display: flex; justify-content: center; }

2.垂直居中

2.1单行文本垂直居中

<!-- html部分方法一 --> <div class="center"> 123 </div>/* css部分方法一 */ .center{ padding-top:50px; padding-bottom:50px; bac公斤round: indianred; }<!-- html部分方法二 --> <div class="center">1
回复

使用道具 举报

2991

主题

2万

回帖

9913万

积分

论坛元老

Rank: 8Rank: 8

积分
99139312
发表于 2024-9-27 18:42:11 | 显示全部楼层
外贸B2B平台有哪些?
回复

使用道具 举报

2930

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109437
发表于 2024-10-11 02:17:49 | 显示全部楼层
“BS”(鄙视的缩写)‌
回复

使用道具 举报

2930

主题

2万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109437
发表于 2024-10-14 07:58:27 | 显示全部楼层
你说得对,我们一起加油,未来可期。
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-5 16:25 , Processed in 0.074250 second(s), 19 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.