如何使用css，把div设置为一个椭圆容器,在做html页面开发时，我们一般都是使用div来做容器的，如果你需要一个椭圆形的容器，我们可以使用div来实现的，下面来看一下。......
div如何水平居中与垂直居中？css/html
来源：互联网
2023-03-16 19:10:23 230
在web前端开发中经常需要使用到让div进行水平和垂直居中的技术。
现在我们就来谈谈如何实现让div水平和垂直居中。
工具/原料
- 电脑，浏览器
方法/步骤
先看下初始化代码，此时div没有水平和垂直居中
html>
head>
meta charset="utf-8">
style>
/style>
/head>
body>
div style="border:1px red solid;width:500px;height:500px;">
/div>
/body>
/html>
运行结果如下
我们来实现让div水平居中
让div实现水平居中的最佳方式是设置margin为auto(自动)，或者仅仅设置margin-left与margin-right自动。
代码如下：
margin:auto;
运行结果如下
然后我们来设置让div垂直居中。
垂直居中也可以通过设置margin方式实现。不过不能设置为auto，要设置上下margin的具体的百分比或者具体的像素值。不过这个只能根据你的实际情况来设置，我这里只需要设置margin-top为5%就可以了
代码如下
margin-top:5%;
运行结果如下
还有几种垂直居中方法
1. 垂直居中也可以通过设置div的父元素的padding方式实现
我这里设置的padding-top:5%;
代码如下：
运行结果如下
其他几种垂直居中的思路
1.可以通过相对定位实现div垂直居中
2.可以通过绝对定位实现div垂直居中
3.可以设置div父元素的行高等于其本身高度实现垂直居中
以上思路都是清测可行的，
注意事项
- 如果您觉得我的经验稍微有点作用的话，请给我投下票，当然如果有疑惑欢迎给我留言，我会持续答复的o(^▽^)o
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
相关文章
- 详细阅读
- 详细阅读
-
HTML5创作工具，MAKA 2.0史上最全操作指南详细阅读
HTML5创作工具，MAKA 2.0史上最全操作指南,超过15000种模板组合。还怕你没有发挥的空间吗？MAKA（中文：码卡）作为中国最早推出移动端卡片式交互模式的创新者，随着HTML5技术的日渐成熟......
2023-03-16 438 HTML
![HTML网页制作：[17]CSS常用样式字体及颜色属性](https://exp-picture.cdn.bcebos.com/ba274f598540102a99638a11b142a07aa110c5d4.jpg)