一、文本居中
1、横向居中
text-aline:center;
2、单行文本垂直居中
line-height:height;
3、多行文本垂直居中
盒子不设置高度,同时设置上下相同的padding;
.box{ width:400px; font-size:20px; line-height:40px; padding:20px 0px; }
二、块级元素居中:
1、横向居中
①已转块或块级:
margin:0 auto;
②绝对定位(宽度定值)
.box{ position:relative; } .box .son{ width:400px; position:absolute; left:50%; margin-left:-200px; }
③空间移动(宽度不定)
.box{ position:relative; } .box .son{ width:400px; position:absolute; left:50%; transform:translateX(-50%);/*空间移动,水平移动*/ }
2、垂直居中
①不设置父盒子高度,同时设置上下相同的padding,前提是块级元素和父盒子宽度都固定
.box { width: 400px; /* 子盒子垂直居中 父盒子高度省略 设置相同的上下padding */ padding: 100px 0; border: 1px solid #000; } .box .son { width: 200px; height: 50px; background-color: lightblue; margin: 0 auto; }
②绝对定位(高度固定)
.box{ position:relative; } .box .son{ heighr:400px; position:absolute; top:50%; margin-top:-200px; }
③空间移动(高度不定)
.box{ position:relative; } .box .son{ height:400px; position:absolute; top:50%; transform:translateY(-50%);/*空间移动,垂直移动 */ }
3、水平垂直居中
①宽高固定
.box{ position:relative; } .box .son{ width:400px; height:400px; position:absolute; left:50%; top:50%; margin-top:-200px; margin-left:-200px; }
②宽高不固定
.box{ position:relative; } .box .son{ position:absolute; left:50%; top:50%; transform:translateX(-50%);/*空间移动,水平移动 */ transform:translateY(-50%); /*空间移动,垂直移动*/ }