首页 > web前端 > css教程 > 用CSS实现DIV水平居中显示

用CSS实现DIV水平居中显示

php中世界最好的语言
发布: 2020-09-05 11:36:05
原创
24266 人浏览过

div用css设置居中的方法:首先对body设置“text-align:center”;然后对需要居中的div盒子设置css样式为“margin:0 auto”即可让对应div水平居中。

用CSS实现DIV水平居中显示

怎么样使用CSS让DIV居中显示?给大家做了一份通俗易懂的代码,利用CSS实现DIV水平居中显示,有需要的朋友可以借鉴参考一下。

需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版。

首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中。

div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px,边框为红色。以便我们观察效果。

1、完整html+css代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<title></title> 
<style> 
body{ text-align:center} 
.div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
/* css注释:为了观察效果设置宽度 边框 高度等样式 */ 
</style> 
</head> 
<body> 
<div class="div"> 
DIVCSS5实例 
</div> 
</body> 
</html>
登录后复制

2、div+css居中实例截图

div css实现居中效果截图

div实现居中效果截图

1.png

3、div居中代码应用特点

此居中方法是让div居中效果完美兼容各大平台、兼容各大浏览器,无论高版本ie还是高版本的ie均兼容。

这就是是用CSS实现DIV水平居中显示的方法。

相关阅读:

html怎么转成txt文件


怎样对table和td设置背景实现表格边框


怎样对table和td技巧性设置表格边框

以上是用CSS实现DIV水平居中显示的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板