前端CSS关于居中的小技巧

1.第一种情况:文字在DIV中垂直水平居中小技巧

例如:前端CSS关于居中的小技巧

 

 

 html源码展示:

1 <div id="HMDYH">
2     黑名單用戶
3 </div>

CSS源码展示

前端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关于居中的小技巧

 

后面就不写的太详细,简单展示重点CSS部分

2.第二种情况:div居中显示于电脑屏幕方法

前端CSS关于居中的小技巧
1 .className{
2     Position: absolute;
3     left: 0;
4     right: 0;
5     top: 0;
6     bottom: 0;
7     margin: auto;
8     position: fixed;//用于在固定当前位置
9 }
前端CSS关于居中的小技巧

3.第三种情况:DIV水平垂直居中父级DIV方法

父级div必须使用相对定位:position:relative;

需要居中的div使用绝对定位:

前端CSS关于居中的小技巧
1 .className{
2     Position: absolute;
3     left: 0;
4     right: 0;
5     top: 0;
6     bottom: 0;
7     margin: auto;
8 }
上一篇:伪元素选择器及选择器优先级、字体背景边框display属性与盒子模型


下一篇:第三天,接触CSS