网上科普有关“HTML CSS中如何实现DIV中的水平垂直居中对齐”话题很是火热，小编也是针对HTML CSS中如何实现DIV中的水平垂直居中对齐寻找了一些与之相关的一些信息进行分析 ，如果能碰巧解决你现在面临的问题 ，希望能够帮助到您。
HTML CSS中实现DIV中的水平垂直居中对齐的方法：
所谓的水平垂直居中就是把放在一个容器元素中（容器大于尺寸或是指定了大小的容器），并且位居此容器正中间（中间是指元素容器的正中间） ，而不是以背景（background-image）形式展示 ，是以<img>元素形式展示的 。如下图所示：
1、解决水平居中的办法：如果左浮动并且"display:inline"时，只要给设置一个"text-align:center"属性 ，就顺利解决了水平居中 。
2 、解决垂直居中的办法：使用display:table-cell和设置了display:inline-block的线合span。
完整例子：
html代码：
<ul >
<li><a href="#" ><span></span><img src="images/img1.jpg" /></a></li>
<li><a href="#" ><span></span><img src="images/img2.jpg" /></a></li>
<li><a href="#" ><span></span><img src="images/img3.jpg" /></a></li>
<li><a href="#" ><span></span><img src="images/img4.jpg" /></a></li>
</ul>
css代码：
<style type="text/css">
.imgWrap li {
float: left;
border: solid 1px #666;
margin: 10px 10px 0 0;
list-style: none;
border-collapse: collapse;
}
.imgWrap a {
background: #ffa url(images/gridBg.gif) repeat center;
width: 219px;
height: 219px;
display: table-cell;/*容器以表格的单元格形式显示*/
text-align: center; /* 实现水平居中 */
vertical-align: middle; /*实现垂直居中*/
}
.imgWrap a:hover {
background-color: #dfd;
}
.imgWrap img {
border: solid 1px #66f;
vertical-align: middle; /*垂直居中*/
}
</style>
实现效果如下：
CSS实现水平垂直居中的几种方法介绍
本文章主要介绍css如何实现在div中垂直居中问题 ，具有一定参考价值，希望能给大家提供帮助
平时我们在做页面时经常会遇到让我们把一张显示在div正中间但是常常不知道如何去做 ，今天我们来分享几种常用的css实现在div中垂直居中的代码
HTML代码
<div>
<img src="images/1.jpg">
</div>方法一
利用position和margin共同实现
通过给父元素设置绝对定位属性来让子元素相对于div定位
relative是保留原来的位置进行定位并且是相对于自己原来的位置进行定位
absolute 是脱离原来位置定位 ，是相对于最近的有定位的父级进行定位；如果没有有定位的父级元素，就相对于文档进行定位
注意：要使子元素的上下左右都为0，然后设置margin：auto就会自动垂直居中
代码如下
div{
width:200px;
height:200px;
border: 1px solid #ccc;
position: relative;//父元素设置绝对定位
}
img{
position: absolute;//相对定位
width:80px;
height:50px;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;//使其垂直居中
}效果图
方法二
利用display: table-cell;vertical-align: middle;text-align: center;三种属性实现
display:table-cell:会作为一个表格单元格显示（类似 <td> 和 <th>)
vertical-align: middle;设置垂直对齐方式 ，适用于行级元素
text-align: center：设置水平对其方式 ，该属性通过指定行框与哪个点对齐，从而设置块级元素内文本的水平对齐方式 。
div{
width:200px;
height: 200px;
margin:300px auto;
display: table-cell;//作为一个表格单元格显示
vertical-align: middle;//设置垂直对齐方式
text-align: center;//设置水平对其方式
border:1px solid #ccc;
}
img {
width:80px;
height:50px;
}效果图
方法三
利用position,以及margin-top 、margin-left实现
在本方法中要注意margin-top、margin-left值的设定 ，要设置为元素高度和宽度的一半 ，而且都要取负值
例如margin-top: -40px意思就是元素距离上边界向上40px，而margin-top: 40px的意思是距离上边界元素向下40px
div{
width:200px;
height:200px;
border: 1px solid #ccc;
position: relative;
}
img{
position: absolute;
width:80px;
height: 50px;
top:50%;
left:50%;
margin-top: -40px;//向上40px
margin-left: -25px;//向左25px
}效果图
总结：实现利用css将在div中垂直居中问题的方法有很多中 ，
CSS实现水平垂直居中对齐在CSS中实现水平居中 ，会比较简单 。常见的，如果想实现inline元素或者inline-block元素水平居中 ，可以在其父级块级元素上设置text-align: center实现；如果想实现块级元素的水平居中对齐 ，可以设置magin: auto。而如果想实现垂直居中对齐，或许就不太容易 。
以下 ，我总结了一些实现水平垂直居中对齐的一些方法 。如果有什么不足之处 ，望指出。
水平垂直居中的实现可以分为两大内容，一是高度随内容自适应变化，一是固定高度 。
固定高度实现水平垂直居中方法一最常用的方法是使用height + line-height的方式 ，设置同样的值 ，配合text-align的使用，即可实现文本的水平垂直居中对齐
<div >Hello World！</div>
.container {
width: 300px;
height: 300px;
line-height: 300px;
text-align: center;
border: 1px solid red;
}缺点：固定高度 ，无法实现两行文本的垂直居中对齐
方法二使用绝对定位的方法 ，配合margin负值使用 。可以实现元素的水平垂直居中效果。
<div >Hello World！</div>
.container {
position: absolute;
left: 50%;
top: 50%;
margin-left: -150px;
margin-top: -150px;
width: 300px;
height: 300px;
border: 1px solid red;
}当然了，可以使用CSS3的calc函数简化上面的CSS代码
.container {
position: absolute;
left: calc(50% - 150px);
top: calc(50% - 150px);
width: 300px;
height: 300px;
border: 1px solid red;
}缺点：固定高度 ，高度无法自适应内容。元素脱离文档流 。
方法三添加空标签的方式 ，并且使该元素浮动，脱离文档流 ，避免影响其他元素的布局 。
<div ></div>
<div >
<div >
hello world！
</div>
</div>
.space {
float: left;
height: 50%;
margin-top: -150px;
}
.container {
clear: both;
height: 300px;
border: 1px solid red;
position: relative;
}缺点：这种方式下的垂直居中需要固定高度 ，无法实现内容自适应高度。同时，出现多余的空div元素 。
高度自适应实现水平垂直居中方法一CSS3中有transform属性 ，此属性下有一个translate移动函数 ，此函数接受两个参数 。如果两个参数都为百分比值，此时会基于自身宽度和高定进行移动。此函数移动的机制同position:relative相似 。
<div >Hello World！</div>
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); // 自身宽度和高度的一半
border: 1px solid red;
}优点：无需定高度 。高度随内容自适应。
缺点：元素脱离文档流 。如果需要居中的元素已经在高度上超过了视口，那它的顶部会被视口裁切掉 。
方法二我们知道 ，可以使用margin来实现水平居中对齐 ，而无法使用margin实现垂直居中的原因在于margin的百分比值是基于宽度计算的。
<div >Hello World！</div>
.container {
width: 300px;
margin: 50% auto 0;
border: 1px solid red;
tarnsform: translateY(-50%);
}上面代码中，由于百分比是基于父元素（此时的父元素为body元素）的宽度计算的 ，所以此时的50%加上translate负值并不能实现垂直居中布局 。
不过 ，CSS中存在一个vh（视口高度）,也就相当于DOM中document.body.clientHeight或者document.documentElement.clientHeight的高度，1vh=1% ，即1vh等于视口高度的1% 。vh单位的浏览器兼容性问题可看vh。因此 ，以上代码可改为如下，即可实现水平垂直居中效果。
<div >Hello World！</div>
.container {
width: 300px;
margin: 50vh auto 0;
transform: translateY(-50%);
border: 1px solid red;
}方法三CSS3中存在flex布局（伸缩布局盒模型 ，也叫弹性布局盒模型） ，对于flex熟悉的朋友来说，使用flex实现水平垂直居中是再简单不过的了 。
<div >
<div >
<p>hello world!</p>
</div>
</div>
.container {
display: flex;
height: 100vh;
}
.inner {
margin: auto;
}当我们使父元素display: flex时 ，margin: auto不仅可以水平居中 ，也能够实现垂直居中 。这是因为auto外边距会平分水平或垂直方向上的额外空间。
当然，也可以使用justify-content: center来定义弹性项目主轴的对齐方式，align-items: center来定义弹性项目侧轴的对齐方式 。
<div >
<div >
<p>hello world</p>
</div>
</div>
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}方法四可以使用display: table来模拟表格 ，并给子元素设置display: table-cell ，让其成为表格的某个单元格，同时设置vertical-align: middle ，即可实现垂直居中布局
<div >
<div >
hello world！
</div>
</div>
.container {
display: table; /* 让div以表格的形式渲染 */
width: 100%;
border: 1px solid red;
}
.inner {
display: table-cell; /* 让子元素以表格的单元格形式渲染 */
text-align: center;
vertical-align: middle;
}使用此种方式 ，不需要固定高度 。只需要给定任意高度或者不给高度，即可实现水平垂直居中效果。
关于“HTML CSS中如何实现DIV中的水平垂直居中对齐 ”这个话题的介绍 ，今天小编就给大家分享完了 ，如果对你有所帮助请保持对本站的关注！
本文来自作者[花钰文]投稿，不代表石号立场，如若转载，请注明出处：https://s0429.com/cshi/202512-2155.html
评论列表（4条）
我是石号的签约作者“花钰文”！
希望本篇文章《HTML CSS中如何实现DIV中的水平垂直居中对齐》能对你有所帮助！
本站[石号]内容主要涵盖：国足,欧洲杯,世界杯,篮球,欧冠,亚冠,英超,足球,综合体育
本文概览：网上科普有关“HTML CSS中如何实现DIV中的水平垂直居中对齐”话题很是火热，小编也是针对HTML CSS中如何实现DIV中的水平垂直居中对齐寻找了一些与之相关的一些信息进...