外链论坛

 找回密码
 立即注册
搜索
查看: 95|回复: 2

CSS 怎么样居中一个元素

[复制链接]

3001

主题

220

回帖

9909万

积分

论坛元老

Rank: 8Rank: 8

积分
99099134
发表于 2024-6-30 09:55:18 | 显示全部楼层 |阅读模式

前言

本文重点介绍水平居中,垂直居中,还有水平垂直居中各样办法,思维导图如下:

1、水平居中

1.行内元素水平居中

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

.parent{//在父容器设置 text-align:center; }

另外倘若块级元素内部包着是一个块级元素,咱们能够先将其由块级元素改变为行内块元素,再经过设置行内块元素居中以达到水平居中。

<div class="parent"> <div class="child">Demo</div> </div> <style> .parent{ text-align:center; } .child { display: inline-block; } </style>

2.块级元素的水平居中

这种情形能够有多种实现方式,下面咱们仔细介绍:

①将该块级元素上下外边距margin-left和margin-right设置为auto

.child{ width: 100px;//保证该块级元素定宽 margin:0 auto; }

运用table+margin

先将子元素设置为块级表格来表示(类似),再将其设置水平居中

display:table在表现上类似block元素,然则宽度为内容宽。

<div class="parent"> <div class="child">Demo</div> </div> <style> .child { display: table; margin: 0 auto; } </style>

运用absolute+transform

先将父元素设置为相对定位,再将子元素设置为绝对定位,向右移动子元素,移动距离为父容器的一半,最后经过向左移动子元素的一半宽度以达到水平居中。

<div class="parent"> <div class="child">Demo</div> </div> <style> .child { position:absolute; left:50%; transform:translateX(-50%); } .parent { position:relative; } </style>

不外transform属于css3内容,兼容性存在必定问题,高版本浏览器必须添加有些前缀。

运用flex+justify-content

经过CSS3中的布局利器flex中的justify-content属性来达到水平居中。

<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { display: flex; justify-content:center; } </style>

运用flex+margin

经过flex将父容器设置为为Flex布局,再设置子元素居中。

<div class="parent"> <div class="child">Demo</div> </div> <style> .parent { display: flex; } .child { margin:0 auto; } </style>

3.多块级元素水平居中





上一篇:CSS居中对齐、
下一篇:3种实现CSS 上下居中的办法
回复

使用道具 举报

0

主题

1万

回帖

1

积分

新手上路

Rank: 1

积分
1
发表于 2024-9-3 16:15:57 | 显示全部楼层
你的留言真是温暖如春,让我感受到了无尽的支持与鼓励。
回复

使用道具 举报

3045

主题

3万

回帖

9910万

积分

论坛元老

Rank: 8Rank: 8

积分
99109052
发表于 2024-9-30 04:08:12 | 显示全部楼层
“BS”(鄙视的缩写)‌
回复

使用道具 举报

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

本版积分规则

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

GMT+8, 2024-11-23 09:04 , Processed in 0.107169 second(s), 21 queries .

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.