div内容居中显示，div居中显示三种方式（div不定宽度如何实现水平居中）

关于【div内容居中显示】:div居中显示三种方式，div居中显示style=al，今天小编给您分享一下，如果对您有所帮助别忘了关注本站哦。

• 内容导航：
• 1、HTML 中 div不定宽度如何实现水平居中
• 2、div内容居中显示：div居中显示三种方式，div居中显示style=al
• 3、如何使 一个 div 居中显示
• 4、如何使DIV中的内容居中
• 5、DIV怎么居中
• 6、如何让图片在div中居中显示?

1、HTML 中 div不定宽度如何实现水平居中

接触前端的小伙伴们，相信大家对盒子水平居中再熟悉不过了，盒子水平居中的两个缺一不可的条件为：宽度和margin:0 auto;

然而进一步推想盒子水平垂直居中怎么实现呢，同样我们可以借助定位以及top：50%和left：50%加margin-left和margin-right的值设置为宽度的一般加负号。

两者都ok了，那么我们再来想一下如果一个盒子不确定宽度怎么实现让它水平居中呢？

具体可见如下代码：

想学习更多案例效果的小伙伴可以加我Q群：142991222，一起探索更多前端干货。

如此一来，一个简单的需求就实现了，同时大家也掌握了三种居中的情况，这些情况也是我们平时项目中经常用到的，希望对大家有所帮助。

2、div内容居中显示：div居中显示三种方式，div居中显示style=al

Div 在页面中居中

　　以下为让div显示在浏览器正中间的样式
　　 　　type="text/css">
　　#centerdiv
　　{
　　position:absolute;
　　
　　top:50%;
　　
　　left:50%;
　　
　　margin:-150px
　　0
　　0
　　-100px;
　　
　　width:300px;
　　height:200px;
　　background:black;
　　}
　　
　　
　　相信大家最不明白就是在margin:-150px
　　0
　　0
　　-100这个属性上面，在不设置这个属性的时候,这个div的x坐标为内容显示部分的50%，y坐标为内容显示部分的50%，显示出来的然而这样的话只能说这个div的起点是在正中间，我们需要的是将整个div显示在正中间,所以给margin-left:-150px;(这里的150是从width属性中得来的它是等于width的一半,对应的margin-top也是通过通样的方法得来的。)这样就会把整个div的宽度分一半到左边就可以让其水平居中了，在设置margin-top:-100px;是同样的道理，会将整个div的高度分一半到上面显示。就形成了整个div在浏览器的正中间显示。

3、如何使 一个 div 居中显示

　　第一种方式：设置body 居中。在CSS中的代码是（body{text-align:center;}）
　　第二种方式：用盒子模型，首先设置一个Div ，这个DIV的宽度为100%，然后在这个DIV居中，那么在这个DIV中加的内容就居中显示，代码如下：
　　

　　
　　CSS 样式代码：
　　
　　
　　第三种方式：margin：0 auto；

4、如何使DIV中的内容居中

　　CSS中设置文字右对齐可以通过代码：

文本段落

来实现，操作步骤如下：

　　1.新建一个html文档，如下图红框所示；

　　2.可以给文档改个名字，如下图红框所示；

　　3.然后在和之间输入文字内容，如下图红框所示；

　　4.进一步设置以下文字的对齐方式，示例代码如下：

孔雀为什么要东南飞？

；

　　5.在浏览器中预览，文字就实现了右对齐，如下图红框所示；
　　

5、DIV怎么居中

　　在网页源码
　　的最上面加上　　html
　　PUBLIC
　　"-//W3C//DTD
　　XHTML
　　1.0
　　Transitional//EN"
　　"
　　http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
　　在要居中的的DIV中添加
　　style="margin:0
　　auto;"
　　这样就能够让DIV居中.
　　如果你想要当中的图片在正中间显示.请给DIV指定宽度.否则DIV会被视为跟浏览器想同的宽度.
　　这样看起来还是没居中.楼上的TEXT-ALIGN:
　　center
　　只不过是让DIV当中的文本居中而已.不是DIV居中..记住一定要加上宽度

6、如何让图片在div中居中显示?

　　　　方法一：
　　　　思路：利用text-align属性将图片水平居中，然后设置padding-top的值使其垂直居中。
　　　　结构如下：
　　　　

　　　　CSS样式如下：
　　　　div
　　{width:300px;
　　height:150px;
　　background-color:#CCC;
　　border:#000
　　1px
　　solid;
　　text-align:center;
　　padding-top:50px;}
　　　　运行结果如下：
　　　　
　　
　　
　　
　　
　　
　　
　　　　
　　　　释义：
　　　　图片的尺寸为150x100px，DIV的大小为300x200px；
　　　　background-color:#CCC;
　　border:#000
　　1px
　　solid;为DIV加个边框和背景色，便于观察效果。
　　　　text-align:center,实现图片的水平居中；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度
　　–
　　图片的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
　　　　
　　　　
　　　　方法二：
　　　　思路：只用padding属性，通过计算求得居中
　　　　结构代码同上；
　　　　CSS样式如下：
　　　　div
　　{width:225px;
　　height:150px;
　　background-color:#eee;
　　border:#000
　　1px
　　solid;
　　padding-top:50px;
　　padding-left:75px;}
　　　　备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
　　　　
　　　　
　　　　方法三：
　　　　思路：
　　　　利用图片的margin属性将图片水平居中，利用DIV的padding属性将图片垂直居中。
　　　　结构代码同上；
　　　　CSS代码如下：
　　　　div
　　{width:300px;
　　height:150px;
　　background-color:#eee;
　　padding-top:50px;
　　border:#000
　　1px
　　solid;}
　　　　img
　　{display:block;
　　margin:0
　　auto;}
　　　　备注：
　　　　Img是内联元素，要设置其margin属性使其居中，就要将其转换为块元素display:block;然后利用margin:0
　　auto;实现图片的水平居中；（有的设计师为图片再加个div标签，然后通过div标签的margin实现居中

本文关键词：让div里面的div居中，div中的div居中，div居中的方法有几种，html设置div居中显示，div水平居中显示三种方式。这就是关于《div内容居中显示，div居中显示三种方式（div不定宽度如何实现水平居中）》的所有内容，希望对您能有所帮助！

本文链接：https://bk.89qw.com/a-400111