盒模型 垂直水平 剧中

最新推荐文章于 2023-09-30 13:11:25 发布
置顶 最新推荐文章于 2023-09-30 13:11:25 发布
阅读量210 收藏
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rebooting_now/article/details/88356427
版权

1 ，position 元素已知宽度

 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<style>
	div{
		width: 900px;
		height: 900px;
		border: 1px solid red;
		margin:0 auto;
		position: relative;
	}
	p{
		width: 300px;
		height: 300px;
		border: 1px solid blue;
		position: absolute;
		left: 50%;
		top:50%;
		margin-left: -150px;
		margin-top: -150px;
	}
</style>
<body>
	<div>
		<p>123</p>
	</div>
</body>
</html>

2 ，position transform 元素未知宽度 

 

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<style>
.box {
   background-color: #FF8C00;
   width: 300px;
   height: 300px;
   position: relative;
}

.content {
   background-color: #F00;
   width: 100px;
   height: 100px;
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
}
</style>

<body>
   <div class="box">
      <div class="content">
      </div>
   </div>
</body>

</html>

 3，flex布局 

<div class="box">
    <div class="content">
    </div>
</div>

.box {
    background-color: #FF8C00;
    width: 300px;
    height: 300px;
    display: flex;//flex布局
    justify-content: center;//使子项目水平居中
    align-items: center;//使子项目垂直居中
}
.content {
    background-color: #F00;
    width: 100px;
    height: 100px;
}

4，table-cell布局 

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<style>
.box {
    width: 300px;
    height: 300px;
    display: table;
}
.content {
    background-color: red;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
.inner {
    background-color: blue;
    display: inline-block;
    width: 20%;
    height: 20%;
}
</style>

<body>
   <div class="box">
    <div class="content">
        <div class="inner">
        </div>
    </div>
</div>
</body>

</html>

 

rebooting_now
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
实现盒子水平和垂直居中的问题和解决方法
qq_53172414的博客
07-16 857
transform: translate,margin实现盒子水平和垂直居中的问题和解决方法
CSS02_设置盒子水平+垂直居中 & 设置文本水平+垂直居中
linxwx的博客
02-22 9374
写在前面：让div中文字水平居中：text-align: center; 方法1. 在不知道div的宽高的情况下 采用absolute绝对布局，让left和top都是50%，这在水平方向上让div的最左与屏幕的最左相距50%，垂直方向上一样，所以再用transform向左（上）平移它自己宽度（高度）的50%，便可达到水平+垂直居中效果 .center { position: absolute; top: 50%; left: 50%; /*-webkit
盒模型居中方法总结
hui_style的博客
07-24 3940
盒模型居中的方法总结： 1.使用margin指定具体值 2.使用position + margin 3.使用flex + margin 4.使用flex+ justify-content或align-items 5.使用position定位 + transform 6.利用table-cell居中 7.补充：使用行内块 + text-align 水平居中
css（css3）实现垂直水平居中的那些事
前端小白
03-03 2887
都说“金三银四求职季”，本人也选择了在这个时候成为这浩浩荡荡的求职大军中的一员，几次面试下来，发现面试官都爱问的一个问题就是：“说说垂直水平居中都有哪些实现方式吧？”       面试过程巴拉巴拉一大堆，现在终于有时间把这些知识点总结归纳起来，希望能帮自己巩固下，也希望可以帮到有需要的小伙伴~大神路过求轻喷求包涵。      言归正传，既然说到垂直水平居中，那现在咱们就来好好归纳下：“水平居中
position为absolute的元素如何实现居中
weixin_30632089的博客
06-17 610
当给div设置absolute时，该元素已经脱离文档流，呈现浮动状态，只能通过left，top，right，bottom来设置属性，要实现居中有两种方法： 一、css法 <div class="box"> </div> .box{ width: 100px; height: 100px; bord...
position定位属性值和元素水平、居中得面试题
yangpengze的博客
01-07 633
position定位得几种方式 position:static static(没有定位)是position的默认值，元素设置相对于原本位置的定位， 元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受 到影响 position:relative 这是相对定位是指给元素设置相对于原本位置的定位，元素并不脱离文档流，因此元素原本的位置会被保留，其他的元素位置不会受到影响，一般配上position:absolute来使用俗称父相子决 position:absolute
CSS中实现元素水平居中、垂直居中的6个方法（详解）
xtcbql的博客
09-30 3万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
android 垂直水平居中对齐,Android中RelativeLayout的字符水平（垂直居中）对齐
weixin_34271305的博客
05-26 1346
【背景】此处Android中显示出来的TextView中的内容，水平中间不对其。想要实现水平居中对齐。【折腾过程】1.搜：android RelativeLayout horizontal center参考：试过了：android:layout_centerHorizontal="true"但没用。2.后来看到：去试了试：android:layout_centerVertical="true"才明...
CSS布局总结——盒模型，position定位，尺寸，水平居中垂直居中，浮动float，BFC
愚蠢的土拨鼠要变聪明的博客
09-27 1498
1.盒模型 盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容) css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图： IE盒模型宽度=padding+content+border+margin   标准盒模型宽...
实现元素水平垂直居中的4种方法
青衫客~的博客
09-30 4184
引 元素的垂直水平居中在网页开发中极为常见，其实现方法也多种多样，接下来将介绍4种实现元素垂直水平居中的方法。实现效果如图： <body> <div class="father"> <div class="son"></div> </div> </body> 一、 使用弹性盒模型flex实现 设置父元素的布局方式为flex， display: flex; 设置父元素在水平方向上的对齐方式为居中对齐，j
史上最全概括，十种方法实现水平垂直居中~来自万物之恋
weixin_47340917的博客
10-28 2284
十种实现水平垂直居中的方法，有用的话就点赞收藏吧！ 十种方法实现水平垂直居中1. 绝对定位配合外边距2. 绝对定位配合外边距二3. 绝对定位配合偏移4. 弹性布局5. 网格布局6. 使用类似表格的布局特性7. 外边距左右自适应配合弹性盒子8. 使用display：box 并设置相应属性9. 使用内边距撑开容器10. 文字居中与同等行高 首先设置好需要用到的标签： <style> *{ margin: 0; padding: 0;
垂直水平居中的几种方式
Azyyan的博客
02-23 5410
文本水平垂直居中的几种方式
前端 水平垂直居中的方法
weixin_46729085的博客
09-16 3023
第一中：writing-mode 可以参考：https://www.runoob.com/cssref/css-pr-writing-mode.html 这种方法稍微有些复杂，writing-mode可以改变文字的显示方向 第二种：table 形式 通过table单元格的形式设 优点：tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了 缺点：这个不是table的正确方法，不是很建议使用，但是也是可以实现的 第三种：table-cell实现水平垂直居中: tab...
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
2021-06-15 CSS盒子模型居中的几种方法
weixin_44345975的博客
06-15 3075
方法一：position配合margin属性1 ①给需要居中的盒子添加margin: auto;（只能水平居中） ②给父元素相对定位，给子元素绝对定位，上下左右位置都设置为0，然后添加margin: auto; 示例代码： <style> #father{ background: #ccc; width: 1000px; height: 600px; position: relati
css 盒子模型理解
weixin_30853329的博客
07-22 539
盒子模型是html+css中最核心的基础知识，理解了这个重要的概念才能更好的排版，进行页面布局。下面是自己积累和总结的关于css盒子模型的知识^_^，希望对初学者有用。 一、css盒子模型概念 CSS css盒子模型 又称框模型 (Box Model) ，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。如图： 图中最内部的...
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法
追梦&天空的博客
07-25 2万+
CSS实现盒子模型水平居中、垂直居中、水平垂直居中的多种方法 CSS实现盒子模型水平居中的方法 水平居中效果图 水平居中全局样式 .parent { color: #FFFFFF; height: 200px; width: 200px; margin: 0 auto; background-color: #000000; } .child { ...
HTML中盒子模型上下左右(水平和垂直方向)都居中
u014033756的专栏
04-05 1万+
有两种方式： 直接上代码：使用定位对div元素进行水平垂直居中，效果如下： 第一种： *{margin:0;padding:0;} .box{width:200px;height:200px;background:red;position:absolute;top:50%;left:50%;margin-left:-100px;margin-top:-100px;}
如何垂直水居中一个元素？
彼岸花@恋雪
04-13 422
第一种方法: div.box{ weight:200px; height:400px; position:absolute; left:50%; top:50%; margin-left:-100px; margin-top:-200px; } *兼容性好;缺点:必须知道元素的宽高 -------------
使h5中盒子水平竖直剧中
最新发布
09-10
1. **Flexbox**（弹性盒模型）: 这是一种现代浏览器广泛支持的布局模式。你可以将包含元素的容器设置为`display: flex;`，然后通过`align-items: center;`使其垂直居中，`justify-content: center;`使其水平居中。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值