css的div垂直居中的方法，百分比div垂直居中（推荐translate）

1. 固定高宽div垂直居中

.outer{

position: relative;

width:100%;

height:100%;

}

.inner{

position: absolute;
left: 50%;
top: 50%;
width:200px;
height:100px;
margin-left:-100px;
margin-top:-50px;

}

你好

</div>

2. 不固定高宽div垂直居中的方法 (推荐translate)

方法一 :

用一个“ghost”伪元素（看不见的伪元素）和 inline-block / vertical-align 可以搞定居中，非常巧妙。但是这个方法要求待居中的元素是 inline-block

你好

</div>

.outer{

width: 50%;
height: 350px;
display: block;
margin: 50px auto;
background-color: palegoldenrod;
font-size: .6rem;
line-height: 1rem;
overflow: hidden;
padding: 5px;
vertical-align: middle;
text-align: center;
}
.outer:after{

content: ” “;
display: inline-block;
width: 0px;
height: 100%;

vertical-align: middle;
}
.inner{

width:90%;
display: inline-block;
}

此方法与图标+文字垂直居中一样的逻辑。都是对图标和文字部分进行 inline-block / vertical-align

以下包括了在固定高度li ，图片 + 文件 + 图片进行垂直居中的效果

1. 图片文字图片采用float:left进行布局

2. 对图片进行垂直居中

左右居中：text-align:center

垂直居中：inline-block / vertical-align .left1:after 高度一定是100%，和固定高度一致，然后inline-block3. 对文字进行垂直居中

向左对齐：text-align：left

垂直居中：inline-block / vertical-align .left2:after。文字比较多的情况要overflow：hiden，可以设置max-height .outer2 .left2-2

.outer2{

width: 50%;
display: block;
margin: 50px auto;
background-color: white;
font-size: .6rem;
line-height: 1rem;
overflow: hidden;
padding: 2px;
text-align: center;
background-color: palegoldenrod;
border-radius:5px ;
}
.outer2 ul {

width:100%;
}
.outer2 ul li{

width:100%;
height: 3rem;
border-bottom: 1px solid darkgrey;
}
.outer2 .left{

float: left;
}
.outer2 .left1{

width: 15%;
text-align: center;
height: 100%;
}
.left1:after{

content: ” “;
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
.outer2 .left2{

width: 70%;
text-align: left;
height: 100%;
overflow: hidden;
}
.outer2 .left2-2{

width: 95%;
display: inline-block;
vertical-align: middle;
max-height:100% ;
}
.left2:after{

content: ‘ ‘;
width: 0px;
height:100% ;
display: inline-block;
vertical-align: middle;
}
.outer2 .left3{

width: 15%;
text-align: center;
height: 100%;
}

.left3:after{

content: ” “;
display: inline-block;
vertical-align: middle;
height: 100%;
width: 0px;
}
.i-img{

vertical-align: middle;
display: inline-block;
height: 28px;
width : 28px;
background: url(img/no-rede.png) center no-repeat;
}

<div class=”outer2″>
<ul>
<li>
<div class=”left left1″>
<i class=”i-img”></i>
</div>
<div class=”left left2″>
<div class=”left2-2″>
haorooms内部内容
</div>
</div>
<div class=”left left3″>
<i class=”i-img”></i>
</div>
</li>
<li>
<div class=”left left1″>
<i class=”i-img”></i>
</div>
<div class=”left left2″>
<div class=”left2-2″>
haorooms内部内容
</div>
</div>
<div class=”left left3″>
<i class=”i-img”></i>
</div>
</li>
<li>
<div class=”left left1″>
<i class=”i-img”></i>
</div>
<div class=”left left2″>
<div class=”left2-2″>
haorooms内部内容
</div>
</div>
<div class=”left left3″>
<i class=”i-img”></i>
</div>
</li>
</ul>
</div>

方法二：你也可以用table-cell ,写法如下：

效果：图片 + 文字 + 图片

1. 采用table table-cell 进行布局一行

2. 采用table-cell的 vertical-align: middle; 垂直居中

.outer3{

width: 50%;
display: block;
margin: 50px auto;
background-color: white;
font-size: .6rem;
line-height: 1rem;
overflow: hidden;
padding: 2px;
text-align: center;
background-color: palegoldenrod;
border-radius:5px ;
}
.outer3 ul {

width:100%;
}
.outer3 ul li{

width:100%;
height: 3rem;
border-bottom: 1px solid darkgrey;
}
.outer3 .table1{

display: table;
width:100%;
height: 100%;
text-align: center;
}
.outer3 .tablel1-cell1{

display: table-cell;
width:15%;
vertical-align: middle;
}
.outer3 .tablel1-cell2{

display: table-cell;
width:70%;
vertical-align: middle;
text-align: left;
}
.outer3 .cell2-content{

width:100%;
max-height: 3rem;
overflow: hidden;
}
.outer3 .tablel1-cell3{

display: table-cell;
width:15%;
vertical-align: middle;
}

<div class=”outer3″ style=””>
<ul>
<li>
<div class=”table1″>
<div class=”tablel1-cell1″>
<i class=”i-img”></i>
</div>
<div class=”tablel1-cell2″>
<div class=”cell2-content”>
haorooms内部内容
</div>
</div>
<div class=”tablel1-cell3″>
<i class=”i-img”></i>
</div>
</div>
<li>
<div class=”table1″>
<div class=”tablel1-cell1″>
<i class=”i-img”></i>
</div>
<div class=”tablel1-cell2″>
<div class=”cell2-content”>
haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容
</div>
</div>
<div class=”tablel1-cell3″>
<i class=”i-img”></i>
</div>
</div>
</li>
<li>
<div class=”table1″>
<div class=”tablel1-cell1″>
<i class=”i-img”></i>
</div>
<div class=”tablel1-cell2″>
<div class=”cell2-content”>
haorooms内部内容
</div>
</div>
<div class=”tablel1-cell3″>
<i class=”i-img”></i>
</div>
</div>
</li>
</li>
</ul>
</div>

方法三：推荐translate() ，更清新简单

效果：图片文字图片

1. 布局用float:left

2. 图片的垂直居中用inline-block和vertical-align: middle;

3. 文字布局采用 transform: translate(0px ,-50%);。注意要position top 联合使用。

transform: translate不光在这些小的地方，可以对弹出层垂直居中

-webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);

.outer4{

width: 50%;
display: block;
margin: 50px auto;
background-color: white;
font-size: .6rem;
line-height: 1rem;
overflow: hidden;
padding: 2px;
text-align: center;
background-color: palegoldenrod;
border-radius:5px ;
}
.outer4 ul {

width:100%;
}
.outer4 ul li{

width:100%;
height: 3rem;
border-bottom: 1px solid darkgrey;
}
.outer4 .left1 {

float:left;
width:15%;
height: 100%;
}
.outer4 .left1:after{

content: ” “;
display: inline-block;
height: 100%;
vertical-align: middle;
width:0px;
}
.outer4 .left2 {

float:left;
width:70%;
height: 100%;
}
.outer4 .left2-content{

width:100%;
height: 100%;
position: relative;
}
.outer4 .left2-content2{

position: absolute;
top: 50%;
transform: translate(0px ,-50%);
max-height: 100%;
overflow: hidden;
text-align: left;
}
.outer4 .left3 {

float:left;
width:15%;
height: 100%;
}
.outer4 .left3:after{

content: ” “;
display: inline-block;
height: 100%;
vertical-align: middle;
width:0px;
}

<div class=”outer4″>
<ul>
<li>
<div class=”left1″>
<i class=”i-img”></i>
</div>
<div class=”left2″>
<div class=”left2-content”>
<div class=”left2-content2″>haorooms内部内容</div>
</div>
</div>
<div class=”left3″>
<i class=”i-img”></i>
</div>
</li>
<li>
<div class=”left1″>
<i class=”i-img”></i>
</div>
<div class=”left2″>
<div class=”left2-content”>
<div class=”left2-content2″>haorooms内部内容</div>
</div>
</div>
<div class=”left3″>
<i class=”i-img”></i>
</div>
</li>
<li>
<div class=”left1″>
<i class=”i-img”></i>
</div>
<div class=”left2″>
<div class=”left2-content”>
<div class=”left2-content2″>haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容haorooms内部内容</div>
</div>
</div>
<div class=”left3″>
<i class=”i-img”></i>
</div>
</li>
</ul>
</div>

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/36033.html

css的div垂直居中的方法，百分比div垂直居中（推荐translate）

相关推荐

发表回复