本文目录
html怎么让div里面的内容居中显示
看你是什么内容，，如果是文字，
《div style=“width:500px;height:500px;background:#000;color:#fff;line-height:500px;“》
这里的文字是会垂直居中的
《/div》
如果是子元素，，可以给它做定位。
《div style=“width:500px;height:500px;background:#000;color:#fff; position:relative;“》
《div style=“width:100px;height:100px;background:#f00;color:#fff; position:absolute;top:50%;left:50%;margin-top:-50px;margin-left:-50px;“》中间这个div也是居中的《/div》
《/div》
如何使DIV中的内容居中
CSS中设置文字右对齐可以通过代码：《p align=“对齐方式“》文本段落《/p》来实现，操作步骤如下：
1.新建一个html文档，如下图红框所示；
2.可以给文档改个名字，如下图红框所示；
3.然后在《body》和《/body》之间输入文字内容，如下图红框所示；
4.进一步设置以下文字的对齐方式，示例代码如下：《p align=“center“》孔雀为什么要东南飞？《/p》；
5.在浏览器中预览，文字就实现了右对齐，如下图红框所示；
如何设置一个div块级元素水平居中
1、主要的核心思想就是给div设置margin:0 auto ,这样就能居中 。
2、下面是实现 div块级元素水平居中 的代码 ：（在下面的代码 我的div 宽度200px 高度40px 背景颜色是蓝色 文字水平居中） 其实没什么特别好解释的 就是一个样式，是因为百度高质量的回答 我把很简单的问题再解释了一遍，
《!DOCTYPE html》
《html》
《head》
《meta charset=“utf-8“》
《title》div在页面居中《/title》
《style》
div{ width:200px;
height:40px;
background:blue;
text-align:center;
line-height:40px;
margin:0 auto ;
}
《/style》
《/head》
《body》
《div》我是一个div 我现在要居中《/div》
《/body》
《/html》
DIV简介：
DIV是层叠样式表中的定位技术，全称DIVision，即为划分。有时可以称其为图层。DIV在编程中又叫做整除，即只得商的整数。 DIV元素是用来为HTML(标准通用标记语言下的一个应用)文档内大块(block-level)的内容提供结构和背景的元素。
定义
《div》 可定义文档中的分区或节(division/section)。
《div》 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 《div》，那么该标签的作用会变得更加有效。
注释:《div》 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。
提示:请使用 《div》 元素来组合块级元素，这样就可以使用样式对它们进行格式化。
怎样才能将div里面的div居中呢
div里面的div居中方法：
一条件：
这个时候对“body”设置css内容居中样式（text-align:center）
即CSS代码：
body{text-align:center}
一 设置：
这个时候对“#divcss”设置居中必备样式css margin
即CSS代码：
#divcss5{margin:0 auto}
二、DIV居中用法实例
为了便于观察布局居中效果，我们再对“#divcss5”加一个css边框为黑色，css宽度为300px;高度为100px样式。
1、最终得到DIV居中的CSS代码：
body{ text-align:center}
#divcss{margin:0 auto;border:1px solid #000;width:300px;height:100px}
2、对应html代码片段：
《div id=“divcss“》DIV水平居中案例《/div》
3、居中案例截图
4、在线演示：
三、布局居中总结
布局居中我们需要对对象加margin:0 auto样式，当然如果不加有的浏览器会实现居中效果，但有的浏览器就不会默认是居中。为了div居中兼容各大浏览器，一定遵循以上教程方法与实施教程。
如何让DIV中的DIV居中
1.先说文字居中。
此处是垂直居中，关键代码height:105px;line-height:105px;两个值要相等。
《div style=’ height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;’ 》居中《/div》
2.文字横向居中，关键代码text-align:center
《div style=’ height:105px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center’》ju zhong《/div》
3.图片居中,代码如下。
《div style=’ height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center’》《img src=“1.png“ alt=““ /》《/div》
4.图片垂直居中，关节代码display: table-cell; vertical-align:middle;
代码如下；
《div style=’ height:105px;width:300px;line-height:105px;overflow:hidden;border:1px solid #FF0099;text-align:center ; display: table-cell; vertical-align:middle; ’》《img src=“1.png“ alt=““ /》《/div》
