整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
相信很多人都知道怎样让一个已知宽高的盒子在浏览器水平和垂直都居中，那么如何让一个未知宽高的盒子水平和垂直都居中呢？
设置已知宽高的盒子水平和垂直都居中的方式，只需要设置盒子绝对定位的坐标是50%，然后再通过margin给负的一半宽度和高度即可实现。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>水平和垂直居中方式</title>
<style>
.box{width:400px; height:200px; background:pink;}
.box{
position:absolute;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
</style>
</head>
<body>
<div class="box">已知宽高的盒子水平和垂直居中</div>
</body>
</html>
现在来看看如何让一个未知宽高的盒子在浏览器水平和垂直都居中，先来了解下css3转换模块的transform:translate(x,y);位移属性。
观察以下代码，第一个盒子为位移盒子的参照物，第二第三个盒子分别设置了位移的水平方向为不同的百分比的值。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平垂直居中方法</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.sport{width: 400px; line-height: 30px; background:#f10180; color:#fff; margin-left: 500px;}
.canzhao{background:blue; transform:translate(0,0);}
.weiyi01{ transform:translate(-50%,0);}
.weiyi02{ transform:translate(-100%,0); background:purple;}
</style>
</head>
<body>
<div class="sport canzhao">宽度400px盒 transform:translate(0,0);</div>
<div class="sport weiyi01">宽度400px盒 transform:translate(-50%,0);</div>
<div class="sport weiyi02">宽度400px盒 transform:translate(-100%,0);</div>
</body>
</html>
显示效果如图：
通过上面代码和效果，可以得到一个结论：transform:translate(x,y); 如果 x 和 y 的值是百分比，则位移距离的参照物是自身元素的宽度和高度。
那么通过上面的结论，就可以让一个未知宽高的盒子实现水平和垂直都居中了，设置元素绝对定位和定位坐标值为50%后，只需要设置盒子水平和垂直方向位移的值都是-50%即可。
代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>盒子水平垂直居中方法</title>
<style>
*{padding: 0; margin: 0; list-style: none;}
.box01{width: 200px; height: 200px; background:blue; color:#fff;
position:absolute;
left: 50%; top: 50%;
margin-left: -100px;
margin-top: -100px;
}
.box02{background:#f10180; color:#fff; font-size:30px; padding: 20px;
position:absolute;
left: 50%;
top: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="box01">已知知宽高的小水平垂直都居中盒子</div>
<div class="box02">未知宽高的小盒子水平垂直都居中</div>
</body>
</html>
效果对比如图：
需要注意的问题是现在css3属性在低版本浏览器是存在兼容性为问题的，如果是一些移动端项目或者是一些不要求兼容低版本浏览器的项目可以使用此方法对盒子进行居中。
皮皮虾，我们走——bbs.520it.com
通常首选方法是使用flexbox居中内容。只需三行代码即可：display:flex，然后使用 align-items:center 和 justify-content:center 将子元素垂直和水平居中。
如下代码：
html：
<div class="flexbox-centering">
<div>Centered content.</div>
</div>css：
.flexbox-centering {
display: flex;
justify-content: center;
align-items: center;
height: 100px;
}使用grid(网格)与flexbox非常相似，也是一种常见的技术，尤其是布局中已经使用网格的情况下。与前一种flexbox技术的唯一区别是它显示为栅格。
如下代码：
html:
<div class="grid-centering">
<div class="child">Centered content.</div>
</div>css:
、盒子里的字，默认是位于盒子内的左上角，如何让它水平居中，垂直居中呢。
图1
图2
以下是我在vscode下做的代码：
图3
*请认真填写需求信息，我们会在24小时内与您取得联系。
