CSS进阶（6）- 居中总结

于 2022-08-22 20:08:10 发布
阅读量90 收藏
点赞数
分类专栏： web前端 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_43416592/article/details/126472914
版权

本系列笔记是基于【渡一教育】袁进老师的html+css基础课程而记录，仅作为个人记录以及阅读使用。

文章目录

居中总结

居中：盒子在其包含块里居中

水平居中

行盒（行块盒）水平居中

要想行盒、行块盒水平居中，给他的父元素设置text-align: center;

常规流块盒水平居中

定宽，然后左右margin为auto

绝对定位元素的水平居中

定宽，然后设置left/right为0，再设置左右margin为auto

tips:
先找绝对定位元素的包含块（从内往外看，找到position不为static的祖先元素时，即为找到；若没有，则整个页面为其包含块）

实际上，固定定位（fixed）是绝对定位（absolute）的特殊情况

垂直居中

单行文本的垂直居中

设置文本所在元素的行高，为整个区域的高度

行块盒或块盒内多行文本的垂直居中

没有完美方案

设置盒子的上下相同的的padding，达到类似的效果

绝对定位的垂直居中

定高，设置top/bottom为0，将上下margin设置为auto

参考资料

  1. 【渡一教育】袁进老师的html+css基础课程
  2. 【渡一教育】袁进老师相关课程源代码
Brisa56
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
居中总结
qq_43952245的博客
08-08 172
文章目录居中总结行盒（行块盒）水平居中常规流块盒水平居中绝对定位元素的水平居中单行文本的垂直居中行块盒或块盒内多行文本的垂直居中绝对定位的垂直居中 居中总结 居中：盒子在其包含块中居中 行盒（行块盒）水平居中 直接设置行盒（行块盒）父元素text-align:center 常规流块盒水平居中 定宽，设置左右margin为auto 绝对定位元素的水平居中 定宽，设置左右的坐标为0（left:0, r...
CSS的多种居中方式
baidu_39009276的博客
02-16 238
css的水平居中、垂直居中、水平垂直居中
行内盒子 上下居中的代码 vertical-align:middle;
dtsxx123的博客
07-31 609
vertical-align:middle;
css居中总结（行盒(行块盒)水平居中、常规流块盒水平居中、浮动块盒水平居中、绝对定位元素的水平居中....）
leadingme的博客
03-25 1334
定义：居中是指盒子的其包含块中居中 行盒（行块盒）水平居中 直接设置行盒(行块盒)父元素 text-align:center; 常规流块盒水平居中 定宽, 设置左右margin为auto; 浮动块盒水平居中 一般会通过设置magin手动居中 绝对定位元素的水平居中 定宽，设置左右的坐标为0 (left:0,right:0),将左右的margin设置为auto , (因为不是常规流，所...
常见居中方式与盒模型笔记
Neko__cat的博客
02-04 117
块级元素水平、垂直居中的方法 利用绝对定位实现元素垂直，水平居中显示（需要知道元素的宽度和高度） 利用margin: 0 auto实现块级元素水平居中 根据margin: auto 实现居中 利用text-align: center;实现块级元素内部的行内元素水平居中 利用vertical-align: middle; 实现垂直居中 根据display: table-cell 和 vertica...
CSS-Notes:CSS相关综合专栏。 计划包含四个方面： ①CSS基础②进阶专题③面试题汇总④一些有意思的奇技淫巧
05-09
CSS进阶 专题总结-兼容性问题 专题总结-居中问题 专题总结-常用布局 专题总结-回流重绘 技巧总结-幽灵空白节点 专题总结-移动端1px问题 技巧总结-检测浏览器对CSS属性的支持 CSS面试[更新中] 这个分类中只会写一些...
曹鹏CSS视频教程-37.文本装饰.rar
07-09
更进阶的是，CSS3引入了`text-decoration-style`，使得装饰线可以是实线、虚线、点线或者波浪线等，增强了装饰效果的多样性。 除了基本的文本修饰，我们还可以使用`text-shadow`属性为文本添加阴影效果，创造出立体...
Udemy-html-css-javascript
03-29
6. JavaScript进阶：异步编程（回调、Promise、async/await）、AJAX、模块化（如CommonJS和ES模块）。 通过这个课程的学习，初学者可以掌握构建现代网页所需的基本技能，而中级开发者则能进一步提升自己的技术水平...
DIV+CSS的30条进阶技能
05-04
【描述】：本文总结了30个关于使用DIV+CSS进行网页编码的关键技巧，旨在帮助新手提升编码水平，步入专业开发者行列。 【标签】：“DIV+CSS的30条进阶技能” 1. **正确闭合标签**：在编写HTML时，确保所有标签都...
DIV+CSS创建网页-边距属性.pptx
最新发布
11-01
网页设计与制作中，CSS...综上所述，熟练掌握CSS的边距属性和这些进阶特性，对于网页设计与制作至关重要。理解并运用好内边距、外边距、box-shadow和box-sizing，能够帮助我们创建出更具吸引力和功能性的网页布局。
[wechat][css]文字两端对齐的替代方法
webfullstack的博客
03-14 265
写在前面,由于微信小程序不支持 的语法,就是把decode='true’打开,会导致微信开发者工具报错卡死,所以才有了下面的css和伪类的配合使用 使用的方案 // 最好配合宽度使用 .c-label2{ margin-right:unit(32,rpx); display: inline-block; width:unit(129,rpx); text...
盒子水平居中实现方法
luckypian
06-25 4260
方法一：外边距(margin) 1.必须给盒子设置宽度； 2.盒子设置外边距margin:0 auto。（上下外边距为0） 注:行内元素或行内块元素若想水平居中，给父元素设置text-align:center。 方法二：绝对定位 ①元素水平垂直居中 1. 对该元素设置绝对定位； 2. 设置left:50%; 当前参考物宽度的一半; margin-left: -小盒子宽度的一半； 3. 设置top:50%;当前参考物高度的一半;margin-top:-小盒子高度的一半。 ②元素水平垂直居中 1. 对该元素设置
CSS实现div盒子水平垂直居中的方式
Zhou的博客
01-03 5428
网上看到有很多方式，这里记录一下我用起来顺手的几种方式，这里敲黑板做笔记，哈哈~~ <div id='container'> <div class='middle'> </div> </div> 首先预备工作，假设这是登录界面，那通常会涉及到背景图片撑满屏幕 <style&gt
css样式水平居中和垂直居中的方法
dishashuo9913的博客
09-22 178
水平居中（包含块中居中）1.定宽，左右margin为auto。（常规流块盒、弹性项目[不用定宽]） 例子：在box1盒子上设置宽，再设置margin：auto； <style> .box1 { width: 200px; height: 200px; background-color: black; ...
盒子居中的方法
qq_45059908的博客
07-21 4198
【方法1】margin值 必须知道两个盒子的宽高，用大盒子的宽度减去小盒子的宽度在除2，再用margin-top,margin-left进行移动 【方法2】当小盒子宽高不固定的时候实现盒子的居中 水平居中：把小盒子设置为行内块元素（inline-block ( 行内块元素 )），父元素设置text-align:center; 垂直居中：当两个元素在同一行显示，这两个元素高度不一样，这两个元素垂直对齐默认基线对齐，垂直居中对齐用vertical-align属性，注意：两个元素都需要设置vertical
css 实现div盒子的居中(二) 用vertical-align: middle
qq_48445738的博客
07-06 829
第二种盒子居中方式 利用vertical-align: middle; 这个属性来做 首先我们来看原来的效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-U
让一个行内元素（如一张图片）始终在盒子中居中
weixin_38681886的博客
06-14 3769
（1）第一种：用vertical-align&lt;div class="title"&gt;        &lt;div class="flag"&gt;&lt;/div&gt;        &lt;div class="content"&gt;            &lt;img src="img_p1_title.png"&gt;   
前端CSS基础——CSS居中方法总结
木的又
05-08 649
文章目录水平居中行盒（行块盒）水平居中常规流块盒水平居中定位元素的水平居中垂直定位单行文本的垂直居中多行文本的垂直居中（在块盒或者行块盒模型内）定位元素的垂直居中 水平居中 水平居中分为三种，一种是行盒（行块盒）模型居中，一种是常规流块盒模型居中，一种是定位元素的水平居中 行盒（行块盒）水平居中 在父级元素添加属性 text-align: center（行块盒同理） div{ ...
html常见盒子居中小结
热门推荐
a785975139的博客
12-04 4万+
html常见盒子居中小结     在写界面时，经常被元素居中的问题困扰。经过一番查阅资料和摸索，鄙人实践出了一套常见元素居中的办法，现在记录下来，以便日后参考。     元素在标准文档流和非标准流中的表现有所不同，所以居中方法也要分开来进行说明。     一、标准文档流 标准文档流里，元素被分为块级元素和行内元素。常用的块级元素有div、h1~h7、li等，它们能够设置宽和高；如果不显示设
html+css+js前端知识点
12-13
"该资源是前端面试复习资料，涵盖了HTML5、CSS3和JavaScript的基础及进阶知识点，包括新特性、布局技术、选择器优先级、CSS单位、适配方法、盒模型、浮动与清除、Flex布局、REM布局、预处理器（Less和Sass）、伪类和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值