HTML和CSS中的居中效果（1）
2021-07-13 14:06
标签：固定 tran vertica nsf display .com inline containe mod 单行上下左右居中 Html: CSS: .container{ width: 600px; height: 300px; text-align: center; line-height: 300px; border: 1px solid green; } 固定高宽上下左右居中 Html: CSS: .container{ border: 1px solid green; width: 600px; height: 300px; position: relative; } .content{ background: black; height: 200px; width: 200px; position: absolute; left: 0; bottom: 0; right: 0; top: 0; margin: auto; } 不固定高宽上下左右居中（1） Html: CSS: .container{ border: 1px solid green; width: 600px; height: 300px; line-height: 300px; text-align: center; } .content{ display: inline-block; line-height: normal; vertical-align: middle; resize:both; overflow: auto; } 10 CSS: .container{ width: 600px; height: 300px; text-align: center; } .container:after/:before{ content:” ”； display: inline-block; vertical-align: middle; height: 100%; } .content{ display: inline-block; vertical-align: middle; resize:both; overflow: auto; } 不固定高宽上下左右居中（5） Html: CSS: .container{ width: 600px; height: 300px; position: relative; border: 1px solid green; } .content{ position: absolute; transform: translate(-50%,-50%); top: 50%; left: 50%; } 不固定高宽上下左右居中（6） Html: CSS: .container{ width: 600px; height: 300px; border: 1px solid green; } .temp{ width: 600px; height: 300px; transform: translateY(50%); }.temp{ float:left; transform: translate(-50%,-50%); margin-left: 50%; } HTML和CSS中的居中效果（1） 标签：固定 tran vertica nsf display .com inline containe mod 原文地址：http://www.cnblogs.com/ct-5/p/7078532.html