如何实现不定宽高水平和垂直居中，在我们开发过程中，有时候由于需要响应式或者容器内容不固定，所以导致容器的宽高也是不固定的，我们都知道，margin:0 auto;和line-height:XXpx;这些都是需要定宽高才能实现水平和垂直居中。
1、已知外层容器的宽高，内容相对于外层容器进行水平和垂直居中
- 利用flex布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>不定宽高居中-flex布局</title>
</head>
<style>
.box{
width:200px;
height:200px;
border:1px solid #ccc;
display: flex;
justify-content: center; /**水平居中*/
align-items: center; /**垂直居中*/
}
.content{
word-break: break-all;
/** 根据需要再给内部元素添加样式 */
vertical-align:middle;
display:inline-block;
}
</style>
<body>
<div class="box">
<span class="content">132121654654654654654654654654654654654654654654</span>
</div>
</body>
</html>
效果如图：
如果不自动换行：不会撑开整个容器
注意：由于进行水平居中，并且整个容器是靠左边的，所以会有一部分被遮住
- 利用table-cell布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>不定宽高居中- table-cell</title>
</head>
<style>
.box{
width:200px;
height:200px;
border:1px solid #ccc;
text-align:center;
display: table-cell;
vertical-align: middle;
}
.content{
word-break: break-all;
vertical-align:middle;
display:inline-block;
}
</style>
<body>
<div class="box">
<span class="content">132121654654654654654654654654654654654654654654</span>
</div>
</body>
</html>
效果如下图：
如果不自动换行，会自动撑开容器
- 利用grid布局
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>不定宽高居中--grid</title>
</head>
<style>
.box{
width:200px;
height:200px;
border:1px solid #ccc;
display:grid;
}
.content{
word-break: break-all;
margin:auto;
}
</style>
<body>
<div class="box">
<span class="content">132121654654654</span>
</div>
</body>
</html>效果如图：
- 利用css的transform
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>不定宽高居中--transform</title>
</head>
<style>
.box{
width:200px;
height:200px;
border:1px solid #ccc;
text-align:center;
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
}
.content{
word-break: break-all;
transform: translate(-50%,-50%);
position: absolute;
top: 50%;
left: 50%;
}
</style>
<body>
<div class="box">
<span class="content">132121654654654654654654654654654654654654654654</span>
</div>
</body>
</html>效果如图：
容易居中，内容也居中
- 利用定位position
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>不定宽高居中--定位</title>
</head>
<style>
.box{
width:200px;
height:200px;
border:1px solid #ccc;
position:relative;
}
.content{
word-break: break-all;
width:50%;
height:50%;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
margin:auto;
}
</style>
<body>
<div class="box">
<span class="content">132121654654654654654654654654654654654654654654</span>
</div>
</body>
</html>
效果如图：
总结：开发过程常用的也就是这么多，后续发现更好的话，在进行补充...
