工作中我们经常遇到需要把一个标签，在一个容器中垂直水平居中，但是我们又可能不确定这个标签的宽高，或者是不固定宽高，那怎么做呢？
网上很多都是标签内放文字，几行几行来做，针对不同行数做不同方法。今天我就说说一个标签整体来垂直水平居中吧，面试也会经常遇到这种问题。
首先说说已知宽高的方法，用处也非常多，比如布局的时候，要绝对居中，或者是做banner图的时候，也需要用到，不可能做一个放大缩小后整体在左，或者是在右吧，还有就是网站经常有那种一排标签，中间有一张图片，而且每张图片大小宽高都不同，所有你不可能每一张单独写样式吧，所以用处非常多。
先说说：已知宽高的我就说一种吧。利用定位，绝对居中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏-前端开发</title>
</head>
<style>
.box{
width: 800px;
height:800px;
border:1px solid #000;
position:relative;
}
.box .cen{
width: 200px;
height: 200px;
background: #0ff;
position:absolute;
left:50%;
top:50%;
margin-left: -100px;
margin-top:-100px;
}
</style>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
下面我就先说说未知宽高图片的垂直水平居中方法吧：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏-前端开发</title>
</head>
<style>
.box{
width: 800px;
height:800px;
border:1px solid #000;
display:table-cell;
text-align:center;
vertical-align: middle;
}
.box img{
vertical-align: middle;
}
</style>
<body>
<div class="box">
</div>
</body>
</html>
那么，下面进入正题，说说未知宽高的方法吧。
方法一：利用定位+margin：auto
优点：这个方法目前我是绝对非常棒。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鹏-前端开发</title>
<style>
.box{
width: 800px;
height: 800px;
border:1px solid #000;
position:relative;
}
.cen{
width: 200px;
height: 200px;
background: #0ff;
position:absolute;
left:0;
top:0;
bottom:0;
right:0;
margin:auto;
}
</style>
</head>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
方法二：利用display:table-cell
缺点：IE6 7 是不支持display:inline-block
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>李鹏-前端开发</title>
<style>
.box{
width: 800px;
height: 800px;
border:1px solid #000;
display:table-cell;
vertical-align: middle;
text-align:center;
}
.cen{
width: 200px;
height: 200px;
background: #0ff;
vertical-align: middle;
display:inline-block;
}
</style>
</head>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
方法三：使用css3 transform:translate(-50%; -50%)；
优点：高大上,可以在webkit内核的浏览器中使用
缺点：不支持IE9以下不支持transform属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏-前端开发</title>
</head>
<style>
.box{
position: relative;
height:800px;
width: 800px;
border:1px solid #000;
}
.box .cen{
width: 200px;
height: 200px;
background: #0ff;
position: absolute;
top: 50%;
left: 50%;
color: #fff;
transform: translate(-50%, -50%);
}
</style>
<body>
<div class="box">
<div class="cen"></div>
</div>
</body>
</html>
方法四：使用css3 flex布局
优点：简单 快捷
缺点：兼容不好吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>李鹏-前端开发</title>
</head>
<style>
.parent4{
display: flex;
justify-content: center;
align-items: center;
width: 800px;
height:800px;
border:1px solid #000;
}
.parent4 .child{
color:#fff;
width: 200px;
height: 200px;
background: #0ff;
}
</style>
<body>
<div class="parent4">
<div class="child"></div>
</div>
</body>
</html>
好了，一共就以上几种方法，看网上有的说插入一个空标签之类的，我觉得不怎么好，毕竟需要插入一个空标签，还是不如我这几种方法，大家觉得哪种喜欢就用哪种吧。 我是比较推荐第一种定位布局的那个。
以上，结束。
网友评论