width: 100px;
height: 100px;
margin: 0 auto;
只需要在父级元素使用 text-align: center; 即可
包裹文字的盒子设置行高等于盒子高度,这样行高的上空隙和下空隙就会把文字内容挤到中间
如果行高小于盒子高度,文字会偏上,行高大于盒子高度,文字会偏下
height: 50px;
line-height: 50px;
加了绝对定位的盒子不能通过 margin:0 auto
实现水平居中,但可以通过以下计算方式实现水平和垂直居中
width: 100px;
height: 100px;
background-color: green;
position: absolute;
/*让盒子的左侧移动到父级元素的水平中心位置*/
left: 50%;
/*1. 使用margin-left: -50px;需要自己计算出盒子自身宽度的一半,如果盒子宽度改变了,这里也要改*/
/*margin-left: -50px;*/
/*2. transform: translateX(-50%);过渡,自动计算自身盒子的一半宽度*/
transform: translateX(-50%);
width: 100px;
height: 100px;
background-color: green;
position: absolute;
/*让盒子的上侧移动到父级元素的垂直中心位置*/
top: 50%;
/*1. 使用margin-top: -50px;需要自己计算出盒子自身高度的一半,如果盒子高度改变了,这里也要改*/
/*margin-top: -50px;*/
/*2. transform: translateY(-50%);过渡,自动计算自身盒子的一半高度*/
transform: translateY(-50%);
原文:https://www.cnblogs.com/yloved/p/13056612.html