浅谈CSS居中问题（水平居中、垂直居中、水平垂直居中）

最新推荐文章于 2024-06-03 18:53:48 发布
置顶 最新推荐文章于 2024-06-03 18:53:48 发布
阅读量409 收藏 3
点赞数
分类专栏： web前端 文章标签： css html flex javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jiang_fulai/article/details/103089371
版权

浅谈居中问题

概述

谈到居中，想必在工作中经常碰到该问题。水平居中，垂直居中，已知元素宽高，未知元素宽高等情况。

居中元素主要有以下两种
1. 行内元素居中
2. 块元素居中

居中情况主要有以下两种
1. 已知元素宽高居中
2. 未知元素宽高居中

行内元素居中

水平居中

方法一：父元素设置text-align: center;即可

在这里插入图片描述
在这里插入图片描述

垂直居中

方法一：父元素设置line-height即可

在这里插入图片描述
在这里插入图片描述

方法二：父元素设置padding-top、padding-bottom

在这里插入图片描述
在这里插入图片描述

水平垂直居中

方法：设置text-align:center; line-height即可

在这里插入图片描述
在这里插入图片描述

块元素居中

水平居中

方法一：margin: 0 auto;

在这里插入图片描述
在这里插入图片描述

方法二：改变块元素为行内块元素 display: inline-block;

在这里插入图片描述
在这里插入图片描述

方法三：定位 position

在这里插入图片描述
在这里插入图片描述

方法四：flex布局

在这里插入图片描述
在这里插入图片描述

方法五：box布局

在这里插入图片描述
在这里插入图片描述

垂直居中

水平垂直居中

jiang_fulai
关注
专栏目录
CSS解决页面图片水平垂直居中问题的方法
01-19
有时需要产品图片水平垂直居中显示，这种展示用CSS来实现又是比较棘手的一件事，我想很多前端攻程师都有研究过或者说是搜索过这些方法吧。很多网站都是使用table来实现产品图片垂直居中，实现也是相当的方便，唯一...
css 水平居中，垂直居中，自适应宽度的代码
09-25
### CSS水平居中与垂直居中及自适应宽度详解 #### 一、宽度自适应的元素水平居中 在Web开发中，使元素能够根据内容的多少自动调整宽度，并将其水平居中的需求非常常见。本篇文章将详细介绍如何通过CSS实现这一效果...
CSS设置水平垂直居中的方法（ 7种 ）
大剑师兰特的GIS世界
03-19 1809
CSS中内容居中的方法有很多种，具体取决于您想要居中的内容是什么类型的元素以及是在什么情况下居中。
CSS中实现水平居中、垂直居中的几种方法
listener_life的博客
03-28 2694
CSS中实现水平居中、垂直居中的几种方法
【Web】CSS水平垂直居中常见方法总结
沙师弟专栏
05-05 2万+
文章目录一、简介二、元素水平居中三、元素水平垂直居中3.1 position 元素已知宽度3.2 position transform 元素未知宽度3.3 flex布局3.4 table-cell布局 一、简介 说明：本篇文章只是总结一些方法，例子用到的各个元素属性不做解释，详情请看MDN文档，非常的详尽，例子在chrome浏览器下完全好使，IE这个渣渣。 本文出现的错误，请大佬们及时指正，人非圣...
CSS常用水平垂直居中的几种方法
qq_33721778的博客
12-28 2万+
CSS水平垂直居中一、利用margin:auto二、利用position: absolute三级目录 一、利用margin:auto 元素有宽度和高度时，利用margin:auto设置元素水平垂直居中： HTML代码如下： <div class="div1"> <div class="center"></div> </div> CSS代码如下： .div1 { background-color: #eee; width: 200px; hei
CSS中让元素水平垂直居中的6种写法
PILIpilipala的博客
12-09 1220
水平居中 使用CSS控制水平居中： 块级元素 设置width,并设置margin auto 内联元素 父元素设置text-align center 块级元素水平居中 关键属性：margin: 0 auto <style> .container{ width: 300px; height: 300px; border: 2px solid black; } .little{ width: 200px; margin: 0 auto; border: 2px solid
最全CSS3实现水平垂直居中的10种方案
Army-海军的博客
06-28 3万+
最全的实现水平垂直居中方案
如何在 CSS 中设置组件在浏览器屏幕水平垂直居中
暗诺星刻的博客
03-05 1616
如何在 CSS 中设置组件在浏览器屏幕水平垂直居中   在 CSS 中设置组件在浏览器屏幕水平垂直居中可分解为两个问题，一是设置组件在其父组件的水平垂直居中，二是让其父组件铺满整个屏幕。   对于让最外层组件铺满整个屏幕，这需要将其宽高均设置为 100%。不过这样做了会导致浏览器出现水平和垂直的滑条。这是因为元素 body 会默认有一定的边距 margin，一般为 8px，所以同时还要将元素 body 的边距 margin 设为 0。   对于让组件在父组件中水平垂直居中，方法有很多，这里选择 flex 布
【CSS】实现元素水平垂直居中布局（七种方法）
qq_45677671的博客
01-03 2312
css水平垂直居中六大方法
css使用absolute定位实现水平垂直居中
树上骑个猴的博客
12-18 1868
div { width: 100px; height: 100px; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
css元素水平垂直居中
最新发布
博哥的二进制世界
06-03 1419
/图片与文字垂直居中，但会有少量偏差，再通过。在应用一的基础上，给子项（元素） 添加 vertical-align: middle;//子元素相对父元素水平（主轴）居中。//子元素相对父元素垂直（交叉轴）居中。这种写法，在没有指定子元素宽高的情况下，也能让其在父容器中垂直居中。//给父元素加，弹性布局。margin-left:- 自身宽度一半;margin-top:-自身高度一半;
CSS 将两个button按钮垂直+水平居中
01-20
在这个问题中，我们将讨论如何使用CSS将两个button按钮实现垂直和水平居中的方法，主要聚焦于一种使用`position: absolute`和`margin: auto`的技术。这种方法适用于知道元素宽度和高度的情况。 首先，我们需要创建...
浅谈css处理水平居中的问题
09-24
本文将探讨如何使用CSS处理水平居中问题，这是一项基本但至关重要的技能，尤其对于创建响应式和对齐良好的用户界面至关重要。我们将讨论三种主要方法，分别针对行内元素、定宽块状元素和不定宽块状元素。 1. **行内...
CSS水平垂直居中解决方案(6种)
09-24
在CSS布局设计中，水平垂直居中是一种常见的需求，它能确保元素在容器内始终保持中心对齐，无论容器尺寸如何变化。以下将详细介绍六种不同的CSS水平垂直居中解决方案： 1. **绝对定位+margin负值法** 当你知道元素...
html前端使用高德地图入门教程
热门推荐
jiang_fulai的博客
09-11 3万+
web端使用高德地图入门教程 不要问为什么使用高德地图，而不是百度地图，没有为什么 web端使用高德地图入门教程 开始 准备工作 开始 准备工作 如果开发者账号包括Key已经有了，请忽略此步骤 首先，注册开发者账号，成为高德开放平台开发者 登陆之后，在进入「应用管理」 页面「创建新应用」 为应用添加 Key，「服务平台」一项请选择「 Web 端...
scss语法入门
jiang_fulai的博客
04-28 1万+
自学文档 自学文档 scss自学 scss引入其他文件 scss注释方法 scss变量 嵌套 混合 继承 站位选择器 函数 其他功能 scss 是 sass3的新版本，也是目前推荐的语法，以.scss结尾的文件 所以 scss == sass3最新版本，目前就使用scss。 scss自学 scss引入其他文件 引入其他 .scss 文件 ...
html5移动端页面适配方案分析
jiang_fulai的博客
11-20 5789
文章目录html5移动端适配前言vw适配法zoom适配法手淘flexible.js方法小结 html5移动端适配 前言 一直以来移动端适配问题困扰着众多前端开发者，因为众多移动端设备的分辨率不尽相同，导致做到完美适配十分困难，以下方法均为本人在项目开发中所采用的，并且能满足正常的开发需求，现在归纳总结一下，供各位参考。 vw适配法 此方法使得任何页面在不同分辨率设备，所显示的内容均为一样，相...
前端面试题汇总
jiang_fulai的博客
06-25 4518
文章目录综合前端性能优化SEO优化首页白屏优化IE兼容问题及hackhttp、https区别服务器状态码移动端适配HTML5新标签标签语义化CSS3选择器伪类和伪元素新属性动画水平垂直居中清除浮动ES5基本数据类型数组操作方法字符串操作方法跨域闭包原型链面向对象继承垃圾回收内存泄露ES6promise继承数组新增方法字符串新增方法模块开发async、await库、框架（Vue）生命周期v-html...
五种CSS技巧实现水平垂直居中
本文将深入探讨如何使用CSS实现水平垂直同时居中的五种方法，这对于布局设计者来说是非常实用的技能。首先，我们来看第一种思路，利用`text-align`属性和`line-height`。通过将`text-align`设置为`center`，使得单行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值