html 盒子在其包含块中居中总结

最新推荐文章于 2022-12-08 11:20:39 发布
最新推荐文章于 2022-12-08 11:20:39 发布
阅读量235 收藏
点赞数
分类专栏： html 文章标签： css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/I_love_latiao/article/details/107918649
版权
行盒（行块盒）水平居中

直接设置行盒（行块盒）父元素：text-align：center

常规流块盒水平居中

定宽，设置左右margin为auto（margin：0 auto）

绝对定位元素的水平居中

定宽，设置左右的坐标为0（left：0；right：0;），将左右margin设置为auto

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

单行文本垂直居中

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

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

没有完美方案

设置盒子上下文的内边距(padding)相同，达到类似的效果

绝对定位的垂直居中

定高，设置上下的坐标为0（top:0;bottom:0;），上下margin为auto

I_love_latiao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
嵌套的小盒子居中问题
weixin_41684068的博客
06-28 447
盒子居中问题 块级盒子居中 <style> .wrap{ width: 100px; height: 100px; background-color: red; /* 外边距带来的塌陷可以用溢出隐藏解决 或者用内边距、边框 */ overflow: hidden; } .box1{
HTML+CSS总结.doc
11-17
HTML 的结构包括头部（Head）、主体（Body）两大部分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。 设计 HTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形...
盒子在其包含快中居中
m0_55577194的博客
11-19 151
一、水平居中 1.行盒或者行块盒居中 设置父元素快盒 为text-align：center 里面的行盒或者行块盒就会水平居中。 2.块盒水平居中 快盒定宽，左右margin设置为auto就可以。 3.浮动元素水平居中（目前只能通过margin-left调整。其他暂时没有什么好方法） 4.绝对定位水平居中 定宽 left：0 right：0 左右margin为auto 5.固定定位水平居中和绝对定位的用法一样，只是他们的包含快不一样。 二、垂直居中 1.单行文本垂直居中（line-h...
html中盒子嵌套居中6,CSS3_-_使用弹性盒子（Flex_Box）实现完美居中、栅格系统及响应式布局...
weixin_31201555的博客
06-18 534
CSS3弹性盒子介绍弹性盒子是 CSS3 的一种新的布局模式。CSS3 弹性盒( Flexible Box 或 flexbox)，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成...
html里设置行内块元素居中显示,CSS设置行内元素和块级元素的水平居中、垂直居中...
weixin_31235395的博客
06-07 308
CSS设置行内元素和块级元素的水平居中、垂直居中更新时间：2014-10-30作者：久久经验网来源：久久经验网浏览：所属分类：HTML+CSS摘要：久久经验网今天为前端初学者们讲解关于CSS的居中问题CSS设置行内元素的水平居中div{text-align:center}/*DIV内的行内元素均会水平居中*/CSS设置行内元素的垂直居中div{height:30px;line-he...
css居中总结（行盒(行块盒)水平居中、常规流块盒水平居中、浮动块盒水平居中、绝对定位元素的水平居中....）
leadingme的博客
03-25 1334
定义：居中是指盒子的其包含块中居中 行盒（行块盒）水平居中 直接设置行盒(行块盒)父元素 text-align:center; 常规流块盒水平居中 定宽, 设置左右margin为auto; 浮动块盒水平居中 一般会通过设置magin手动居中 绝对定位元素的水平居中 定宽，设置左右的坐标为0 (left:0,right:0),将左右的margin设置为auto , (因为不是常规流，所...
前端学习笔记：实现一个盒子水平居中，学习代码
最新发布
06-21
`使其在包含块内水平居中。这种方法不适用于具有固定宽度的元素。 ```css .box { margin: 0 auto; } ``` 在JavaScript中，虽然通常我们使用CSS来处理布局问题，但有时可能需要动态改变元素的位置。例如，你...
CSS2.1如何让块元素垂直水平居中.rar
05-02
在网页设计中，让元素在页面上垂直和水平居中是一项常见的需求，特别是在CSS2.1规范中。本文将深入探讨如何使用CSS2.1来实现这一目标，无论是对于已知宽高还是未知宽高的块级元素（div）。首先，我们需要理解CSS布局...
HTML盒子模型.pptx
07-30
盒子模型可以使用在页面布局中实现各种布局效果，例如设置页面背景色、设置logo图片的布局、实现水平居中效果等。例如，使用<style type="text/css"> body { margin:0px;padding:0px; background:#ccc; } #logo { ...
HTML盒子模型PPT课件.ppt
07-30
HTML盒子模型PPT课件 HTML盒子模型是网页布局的基础，是构建网页的基本结构。盒子模型由内容区域、内边距、边框和外边距四个部分组成。盒子模型的基本属性包括border、padding和margin三个部分。 1. 盒子模型的...
html盒子模型页面居中,IT兄弟连 HTML5教程 使用盒子模型设计页面布局
weixin_39753747的博客
06-03 376
原标题：IT兄弟连 HTML5教程 使用盒子模型设计页面布局 布局所涉及的技术非常很多，足以另写单独的一本书了。在本节中主要介绍网站中最常用的布局方案，包括区块框居中、两列浮动、三列浮动及多列浮动的区块框。1 居中设计区块框居中的设计是在网页布局中常用的技术，例如将网页内的主体内容设置为一定的宽度，然后在页面内居中占据屏幕的一部分显示，而不是横跨整个屏幕宽度。这样设计的目的是因为现在的显示器尺寸越...
HTML中盒子模型用法
weixin_44194855的博客
03-25 1751
盒子模型 在网页中一切的物体都可以以盒子相称网页就是由多个盒子组成 ##盒子 CSS处理网页时，它认为每个元素都包含在一个不可见的盒子里，那么对网页的布局就相当于摆放盒子，只需要摆放好盒子就可以完成网页的布局啦！是不是感觉很简单呢 ##盒子模型 一个盒子会分成四个部分： 内容区（content） 内边距（padding） 边框（border） 外边距（margin） 如图片所示 内容区 ...
盒子box在网页中居中的方法
weixin_30872157的博客
03-27 738
一：使用绝对定位给4个方向都为0；用margin自动，实现box居中 示例代码： .box { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100px; height: 100px; margin: auto; }...
html盒子模型 居中,css实现盒子模型的各种居中方式
weixin_39969006的博客
06-08 433
复制代码1.绝对定位 margin负值.parent{width:600px;height:600px;margin:auto;position: relative;background-color: #000;}.child{width:200px;height:200px;background-color: red;position: absolute;top:50%;left:50%;mar...
HTML中将盒子居中的办法
nnwnm的博客
12-08 1万+
1.通过position定位后用magin负值居中 2.通过position定位后用transform：translate居中 3.用magin和padding将盒子挤到中心
html 盒子水平居中和水平垂直居中的一些方法
热门推荐
Suowi的博客
03-09 1万+
HTML水平居中和垂直居中
css应用
Yang_Sun_shine的博客
05-05 299
行级标签、块级标签之间的距离
HTML:块元素位置居中
alex_wen2014的博客
10-10 1772
块元素位置居中有两种存在： 一种是有两个块元素，其中一个块元素相对另外一个块元素居中； 另外一种是一个块元素相对于顶级父容器居中 第一种实现方式如下： <html> <head> <meta charset="utf-8" /> <title>测试</title> ...
html中box居中,css：如何将box div元素直接居中放置？
weixin_39785669的博客
06-19 707
body { text-align: center; }#box {width: 500px; /* or whatever your width is */margin: 10px auto;text-align: left;}以上将在顶部和底部的中心水平居中你的盒子在页面上有一个10px的保证金(显然是顶部/底部边缘可以改变，以任何你想要的)。 IE上需要使用“文本对齐”，正如往常一样，它并不...
html中div盒子居中
10-11
有多种方法可以实现HTML中div盒子居中，其中包括使用弹性盒模型、position属性与margin调整等方法。我们可以根据需要选择合适的方法来实现盒子居中。 例如，可以使用弹性盒模型中的justify-content和align-items属性来实现水平和垂直方向的居中。同时，也可以使用position属性和transform属性的translate函数来实现盒子的居中。 下面是三种方法的示例代码： 方案一：使用弹性盒模型 ``` <style> body { margin: 0; } .a { display: flex; justify-content: center; /*水平居中*/ align-items: center; /*垂直居中*/ height: 600px; width: 600px; border: 1px solid black; } .box { width: 200px; height: 200px; background-color: pink; } </style> <div class="a"> <div class="box"></div> </div> ``` 方案二：使用position和margin调整 ``` <style> .a { position: relative; width: 600px; height: 600px; border: 1px solid black; } .box { position: absolute; width: 200px; height: 200px; top: 0; left: 0; right: 0; bottom: 0; background-color: pink; margin: auto; } </style> <div class="a"> <div class="box"></div> </div> ``` 方案三：使用position和transform ``` <style> .a { position: relative; width: 600px; height: 600px; border: 1px solid black; } .box { position: absolute; width: 200px; height: 200px; top: 50%; /*盒子左上角的那个点在页面正中间*/ left: 50%; background-color: pink; transform: translateX(-50%) translateY(-50%);/*不需要知道盒子宽度*/ } </style> <div class="a"> <div class="box"></div> </div> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值