CSS实现盒子模型水平居中的方法

1、margin+width

适用于盒子的宽度是已知的


<div class="parent"><div class="child"></div></div>


.child {width: 50px;margin: 0 auto;}

2、text-align+inline-block

适用于盒子的宽度是未知的


<div class="parent"><div class="child"></div></div>


.parent {text-align: center;}.child {display: inline-block;}

3、float+position

适用于盒子的宽度是未知的


<div class="parent"><div class="between"><div class="child"></div></div></div>


.between {position: relative;left: 50%;float: left;}.child {position: relative;right: 50%;}

4、position

适用于盒子的宽度是未知的


<div class="parent"><div class="between"><div class="child"></div></div></div>


.parent {position: relative;}.between {position: absolute;left: 50%;}.child {position: relative;right: 50%;}

CSS实现盒子模型垂直居中的方法

1、position+transform


<div class="parent"><div class="child"></div></div>


.parent {position: relative;width: 200px;height: 200px;}.child {position: absolute;top: 50%;transform: translate(0%, -50%);}

2、flex布局


<div class="parent"><div class="child"></div></div>


.parent {display: flex;align-items: center;}

CSS实现盒子模型水平垂直居中方法

1、position+tranform


<div class="parent"><div class="child"></div></div>


.parent {position: relative;}.child {position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}

2、position


<div class="parent"><div class="child"></div></div>


.parent {position: relative;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;}

3、flex

<div class="parent"><div class="child"></div><div class="child"></div><span class="child"></span>
</div>

.parent {width: 500px;height: 500px;background-color: yellow;display: flex;/*子元素都会变成行内块级元素*/justify-content: center;align-items: center;/*单行垂直居中*//*align-content: center; 多行垂直居中*/}.child {width: 100px;height: 100px;background-color: saddlebrown;margin-left: 10px;}

个人笔记-css实现盒子模型水平居中和垂直居中相关推荐

【CSS】盒子模型案例 ( 盒子模型尺寸计算 | 盒子模型水平居中 | 盒子模型内外边距设置 | 背景图片及位置设置 | 盒子嵌套设置 )
文章目录一.实现效果二.基本 HTML 结构三.设置最外层盒子样式 ( 盒子模型内外边距设置 ) 四.设置标题盒子样式 ( 盒子模型尺寸计算 | 盒子模型水平居中 ) 五.设置列表盒子样式 ( ...
html盒子模型页面居中,【静态页面架构】CSS之盒子模型
CSS架构盒子模型: 以内容区(显示文本和图像) 内边距(内容区至边距的距离) 边距(内容区的边界) 外边距(元素的边框之间的距离) 1.边距: border属性: 简写属性用来设置边距的上(top ...
php盒子模型,HTML与CSS的盒子模型
这次给大家带来HTML与CSS的盒子模型,使用HTML与CSS的盒子模型的注意事项有哪些,下面就是实战案例,一起来看一下. 一.边框 (上) 1.什么边框? 边框就是环绕在标签宽度和高度周围的线条 2 ...
Web前端，CSS中盒子模型的组成，了解掌握盒子模型的边框、内边距、外边距
前言持续总结输出中,今天分享的是Web前端,CSS中盒子模型的组成,了解掌握盒子模型的边框.内边距.外边距 1.盒子模型的介绍盒子的概念页面中的每一个标签,都可看做是一个 "盒子&qu ...
css中盒模型的属性包括(),css的盒子模型属性有哪些？css盒子模型相关属性的介绍...
本篇文章给大家带来的内容是关于css的盒子模型属性有哪些?css盒子模型相关属性的介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 1.盒子模型图 2.一个简单的盒子模型 box. ...
关于css设置盒子模型，设置像素与实际像素不同的问题
关于css设置盒子模型,设置像素和实际像素不同的问题写网页时,发现自己网页设置盒子像素和实际用ps量的像素不同.盒子模型的margin和padding也对,网页的缩放也时100%,但就是不同. 分析 ...
CSS选择器+盒子模型+定位( 基础笔记 )
CSS学习笔记 CSS-层叠样式表-网页实际上是一个多层的结构,通过CSS可以分别为网页的每一个层来设置样式,而最终我们能看到只是网页的最上边的一层-总之一句话,CSS用来设置网页中元素的样式使用C ...
CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...
【前端学习笔记】(五)（CSS布局盒子模型）
目录盒子模型 1.盒子模型的介绍 2.内容区域的宽度和高度 3.边框( border ) 3.1 边框(border)- 单个属性 3.2 边框(border)- 连写形式 3.3 边框(borde ...

个人笔记-css实现盒子模型水平居中和垂直居中

CSS实现盒子模型水平居中的方法

1、margin+width

2、text-align+inline-block

3、float+position

4、position

CSS实现盒子模型垂直居中的方法

1、position+transform

2、flex布局

CSS实现盒子模型水平垂直居中方法

1、position+tranform

2、position

3、flex

个人笔记-css实现盒子模型水平居中和垂直居中相关推荐

最新文章

热门文章