如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
HTML中标签的块级元素居中问题的解决方法
来源：互联网
2023-03-16 19:16:55 版权归原作者所有，如有侵权，请联系我们
在进行前端开发中，标签元素的居中问题是我们经常会遇到，比如文字的居中，行内元素的居中。我们也会碰到需要将块级元素居中的问题，所以将为大家分享块级元素居中的几种解决方案。
工具/原料
- submit text开发工具
- windows
- 浏览器
方法/步骤
首先，我们通过一段html代码来模拟块级元素需要居中的场景，代码如下：
html>
head>
title>/title>
/head>
style>
.parent{
width:200px;
height:100px;
background: blue;
}
.sub{
width:50px;
height:50px;
background:white;
text-align: center;
}
/style>
body>
div class="parent">
div class="sub">居中元素/div>
/div>
/body>
/html>
使用margin居中。只需要将需要居中div的水平margin设置auto就可以实现水平居中。我们值需要在上一个步骤css代码.sub段添加margin：0auto；即可修改，代码如下：
.sub{
width:50px;
height:50px;
background: white;
margin:0 auto; //添加这行代码
text-align: center;
}
父级元素padding居中，我们可以在居中元素添加父级div通过计算使得白色div居中父级的padding值是多少就可以通过父级div的padding来居中。
html>
head>
title>/title>
/head>
style>
.parent{
height:100px;
width: 200px;
background: blue;
}
.contain{
padding-left: 75px
}
.sub{
width:50px;
height:50px;
background: white;
text-align: center;
}
/style>
body>
div class="parent">
!--为sub添加父级div-->
div class="contain">
div class="sub">居中元素/div>
/div>
/div>
/body>
/html>
使用相对定位居中，通过relative将需要居中的块级元素相对父级居中，通过需要计算需要居中的距离。
代码如下：
html>
head>
title>/title>
/head>
style>
.parent{
height:100px;
width: 200px;
background: blue;
position: absolute;
}
.sub{
width:50px;
height:50px;
background: white;
text-align: center;
position: relative;
left: 75px;
}
/style>
body>
div class="parent">
div class="sub">居中元素/div>
/div>
/body>
/html>
通过上面几个步骤操作，梳理一下块级元素居中几种方式：
1.使用margin：0auto；居中
2.计算父级padding值进行居中
3.使用相对定位居中。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
上一篇：HTML教程 常用的字符实体 下一篇：html表格边框线怎么设置
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 434 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)