1.第一种情况:文字在DIV中垂直水平居中小技巧
例如:
html源码展示:
1 <div id="HMDYH"> 2 黑名單用戶 3 </div>
CSS源码展示
1 #HMDYH { 2 width: 560px; 3 height: 100px; 4 border: 1px initial #000000; 5 background-color: yellow; 6 text-align: center; 7 line-height:100px; 8 vertical-align: middle; 9 font-weight: bolder; 10 font-size: 30px; 11 }
后面就不写的太详细,简单展示重点CSS部分
2.第二种情况:div居中显示于电脑屏幕方法
1 .className{ 2 Position: absolute; 3 left: 0; 4 right: 0; 5 top: 0; 6 bottom: 0; 7 margin: auto; 8 position: fixed;//用于在固定当前位置 9 }
3.第三种情况:DIV水平垂直居中父级DIV方法
父级div必须使用相对定位:position:relative;
需要居中的div使用绝对定位:
1 .className{ 2 Position: absolute; 3 left: 0; 4 right: 0; 5 top: 0; 6 bottom: 0; 7 margin: auto; 8 }