设置div的高度_html中如何让div居中

2024-05-19 01:57:22

html中使得div居中的方法有：margin方法通过设置margin的左边距和上边距的值为父元素减去子元素再除以2的值来使div居中；另外position方法也可以使div居中

web前端学习：打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）zhuanlan.zhihu.com

在页面布局时经常会将网页的主体部分居中在页面上，这就需要我们实现div水平居中，接下来将在文章中为大家具体介绍如何使得div居中在页面中，具有一定的参考价值，希望对大家有所帮助

margin方法

可以通过margin来使得div居中，通过给margin-left设置的值为父元素的宽减去子元素的宽再除以2（本例中：（400-100）/2=150px），margin-top的值为父元素的高度减去子元素的高度值再除以2（本例中:（300-100）/2=100px）

例：

<style>
.box{
width:400px;
height: 300px;
border: 1px solid #ccc;
}
.box1{
width:100px;
height: 100px;
background-color: pink;
margin-left: 150px;
margin-top:100px;
}
</style>
</head>
<body>
<div><div></div>
</div>
</body>
</html>

效果图：

position方法

可以通过定位的方法来使得div垂直居中，我们可以设置子元素绝对定位，另外设置top和left值为50%，但是需要注意一点在用定位是也要设置margin值，其中margin-left与margin-right的值都为负值，且值的大小是子元素宽高的一半

例：

<style>.box{width:400px;height: 300px;border: 1px solid #ccc;position: relative;}.box1{width:100px;height: 100px;background-color: pink;position: absolute;top: 50%;left: 50%;margin:-50px 0 0 -50px      }</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html>

效果图：

总结：以上就是本篇文章的全部内容了，希望通过这篇文章可以帮助大家学会如何将div居中在页面上

以上就是html中如何让div居中的详细内容，更多请关注我！！！！

设置div的高度_html中如何让div居中相关推荐

html高度的属性的值,html – 行高属性是否可以继承父Div的高度属性或其所属Div的访问高度属性？...
我有一个高度为50px的div,其中包含一个子div.子div的高度通过使用css属性/值对从父级继承:height:100%. Some Text 我想真正对齐子div中的文本,并且这样做我将lin ...
css 实现右边div高度随着左边div内容的增加，右边div的高度也增加（左边div与右边div高度保持一致）
从ajax传回来的数据左边撑开了比较多,右边的数据默认显示在下方,添加css更改位置 <template><div class="indexOne">< ...
html 获得div的高度,如何用js获取div不确定的自适应高度（currentStyle与offsetHeight）...
设计网页时,一些元素(如div)因显示的内容多少事先不确定,所以不能固定高度,也就是让它根据内容的多少自动调整高度,即自适应高度. 对于div元素不确定的自适应高度,如何用js获取当前高度呢?一般有两 ...
html中js隐藏div的高度,jQuery实现获取隐藏div高度的方法示例
jQuery实现获取隐藏div高度的方法示例发布时间:2020-09-22 19:27:55 来源:脚本之家阅读:95 作者:zhuyangxing 本文实例讲述了jQuery实现获取隐藏div高 ...
delphi trichviewedit 设置一行的段落_HTML中的文本与段落（3）
上期文章: panda456:小边框,大秘密zhuanlan.zhihu.com 哈哈,没想到吧.自从以前连续出了两期HTML中的文本与段落,这次又出了一期. 就不多讲废话了,直接开门见山--这期文 ...
qt怎么设置标签背景图片_HTML中怎么设置h1的字体样式你知道吗？关于设置h1标签的样式详解...
本篇文章主要为大家讲解了html中的h1标签的样式解析,但是如果不用css样式来做的话,那就只能在html4.01中显示了,所以我们还是尽快学习css层叠样式表吧,好了,现在让我们来说说这篇文章吧. ...
jsp中给div加背景_html中给元素添加背景图片或者gif动图
添加背景图片有四种常用的方式,分别是: repeat 完全平铺 repeat-x 横向平铺 repeat-y 纵向平铺 no-repeat 不平铺使用示例: Document ...
vue设置页面滚动高度_vue中获取滚动高度或指定滚动到某位置
1.点击某个标签,滚动到某个具体位置 switchHeight(num) { this.selectNum = num; if (num == 0) { document.getElementById ...
html中div的覆盖,CSS中如何使div覆盖另一个div的实例
将一个p覆盖在另一个p上有两种手段:一是设置margin为负值,二是设置绝对定位. 可以根个人情况设置z-index的值 1->position 为absolute的情况 #p1{positio ...

最新文章

热门文章