目录
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来。下面我就总结一些比较常用的方法:
一、文本的水平垂直居中:
1、水平居中:
text-align:center
<style>
#father{
width:300px;
height:200px;
text-align:center;
background-color:skyblue;
}
#son{
background-color:green;
}
</style>
<body>
<div id="father">
<span id="son">我是文本</span>
</div>
</body>
结果:
2、垂直居中:
(1)、单行文本
只要height值等于line-height值就
<style>
#father{
width:300px;
height:200px;
background-color:skyblue;
line-height:200px;
}
#son{
background-color:green;
}
</style>
<body>
<div id="father">
<span id="son">我是文本</span>
</div>
</body>
结果:
将子元素换成块级元素。
<style>
#father{
width:300px;
height:200px;
background-color:skyblue;
line-height:200px;
}
#son{
background-color:green;
}
</style>
<body>
<div id="father">
<div id="son">我是文本</div>
</div>
</body>
结果:
ps:height === line-height 无法使替换元素,如<img>、<input>、<areatext>、<select>…垂直居中,必须有<a>、<span>…类似行内标签配合才能使垂直居中生效! (下面的图片垂直居中解法5 会用到这个特性)
(2)、多行文本
情况1:高度固定
关键属性:display:tabel-cell; vertical-align:middle;
<style>
div{
height:200px;
width:300px;
vertical-align:middle;
display:table-cell;
word-break:break-all;
background:skyblue;
}
</style>
<body>
<div id="father">
红豆生南国,春来发几支。愿君多采洁,此物最相思
</div>
</body>
结果:
情况2:父级高度固定,嵌套行内元素
关键属性:父级:diaplay:tabel; 子集:display:tabel-cell; vertical-align:middle;
<style>
div{
height:200px;
width:300px;
display:table;
word-break:break-all;
background:skyblue;
}
span{
display:table-cell;
vertical-align:middle;
}
</style>
<body>
<div>
<span>
红豆生南国,春来发几支。愿君多采洁,此物最相思
</span>
</div>
</body>
结果:
情况3:父级高度固定,嵌套块级元素且该元素高确定
关键属性:定位 + margin-top:负值;
<style type="text/css">
*{
margin:0;
padding:0;
}
div{
height:200px;
width:300px;
position:relative;
word-break:break-all;
background:skyblue;
}
p{
position:absolute;
top:50%;
left:0;
height:80px;
margin-top:-40px;
background:red;
}
</style>
<body>
<div>
<p>
红豆生南国,春来发几支。愿君多采洁,此物最相思
</p>
</div>
</body>
结果:
情况4:父级高度固定,嵌套块级元素且该元素高不确定
关键属性:定位 + transform:translateY(-50%);
<style>
*{
margin:0;
padding:0;
}
/*不加的话会被p或其他标签默认样式影响*/
div{
height:200px;
width:300px;
position:relative;
word-break:break-all;
background:skyblue;
}
/*个人建议,被包裹的块标签就不要height,用内容将高度撑开就好*/
p{
position:absolute;
top:50%;
left:0;
transform:translateY(-50%);
}
</style>
<body>
<div>
<p>
红豆生南国,春来发几支。愿君多采撷,此物最相思
</p>
</div>
</body>
结果:
情况5:父子均 定宽 定高 (水平垂直居中)
关键属性:定位 + margin:auto;
<style>
*{
margin:0;
padding:0;
}
div{
height:200px;
width:300px;
position:relative;
word-break:break-all;
background:skyblue;
}
p{
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;
height:80px;
width:200px;
background:red;
}
</style>
<body>
<div>
<p>
红豆生南国,春来发几支。愿君多采撷,此物最相思
</p>
</div>
</body>
结果:
二、图片的水平垂直居中:
1、水平居中:
(1)、给img设display:inline-block;然后父级text-align:center;
<style>
div{
width:300px;
height:200px;
text-align:center;
background-color:skyblue;
}
img{
/*可以不添加text-align*/
text-align:center;
display:inline-block;
width:100px;
height:100px;
}
</style>
<body>
<div>
<img src="1.jpg"/>
</div>
</body>
结果:
(2)、给img设display:block; 同时设margin: 0 auto;
<style>
div{
width:300px;
height:200px;
text-align:center;
background-color:skyblue;
}
img{
/*display:block可以不加*/
display:block;
margin:0 auto;
text-align:center;
display:inline-block;
width:100px;
height:100px;
}
</style>
<body>
<div>
<img src="1.jpg"/>
</div>
</body>
结果:
2、垂直居中水平居中:
解法1:img父级display:table-cell; vertical:middle; height:xxx; (推荐)
<style>
div{
display: table-cell;
width:300px;
height:200px;
vertical-align: middle;
/*text-align:去掉则垂直不水平*/
text-align:center;
background:skyblue; /*table-cell 可以使替换元素垂直居中,强大!*/
}
img{
width:100px;
height:100px;
}
</style><body>
<div>
<img src="1.jpg"/>
</div>
</body>
结果:
解法2:定位 + transform: translate(-50%,-50%);
<style>
div{
position:relative;
width:300px;
height:200px;
text-align:center;
background:skyblue;
}
img{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:100px;
height:100px;
}
</style>
<body>
<div>
<img src="1.jpg"/>
</div>
</body>
结果:
另:当已知图片大小时也可以把translate换成margin负值,这里不推荐使用。
解法3:定位 + margin:auto;
<style>
div{
position:relative;
width:400px;
height:300px;
text-align:center;
background:#999;
}
img{
position:absolute;
top:0;bottom:0;
left:0;right:0;
margin:auto;
}
</style>
<div>
<img src="1.jpg" />
</div>
</body
结果:
解法4:父级display:table; + 包裹img的元素()设为display:table-cell;
<style>
div{
display:table;
width:300px;
height:200px;
text-align:center;
background:skyblue;
}
span{
display:table-cell;
vertical-align:middle;
}
img{
width:100px;
height:100px;
}
</style>
<body>
<div>
<span>
<img src="1.jpg"/>
</span>
</div>
</body>
结果
解法5:父级line-height == height + <img>vertical-align:middle (推荐)
<style>
img{
border:0;
}
div{
width:300px;
height:200px;
line-height:200px;
background:skyblue;
text-align:center;
}
img{
width:100px;
height:100px;
vertical-align:middle;
}
</style>
<body>
<div>
<img src="1.jpg"/>
</div>
</body>
结果:
解法6:background实现
复制代码
<style>
div{
width:300px;
height:200px;
background:skyblue url(1.jpg) no-repeat center center;
background-size:100px 100px;
}
</style>
<body>
<div>
</div>
</body>
结果:
介于pc端对flex布局的兼容有限,暂且不谈。 若发现错误之处,欢迎拍砖指正,真心感谢!><
转自辛月