网页经常需要将div在屏幕中居中显示,以下几个常用的方法,都比较简单css垂直居中。
水平居中直接加上标签即可,或者设置:auto;当然也可以用下面的方法
下面说两种在屏幕正中(水平居中+垂直居中)的方法 ,放上示范的html代码:
方法一:
div使用绝对布局,设置:auto;并设置top、left、right、的值相等即可,不一定要都是0。
.main{
text-align: ; /让div内部文字居中/
-color: #fff;
-: 20px;
width: 300px;
: 350px;
: auto;
: ;
top: 0;
left: 0;
right: 0;
: 0;
}
效果如图:
方法二:
仍然是绝对布局,让left和top都是50%,这在水平方向上让div的最左与屏幕的最左相50%,垂直方向上一样,所以再用向左(上)平移它自己宽度(高度)的50%,也就达到居中效果了,效果图和上方相同。
.main{
text-align: ;
-color: #fff;
-: 20px;
width: 300px;
: 350px;
: ;
left: 50%; top: 50%;
: (-50%,-50%);
}
方法三:
对于水平居中,可以使用最简单的标签,不过已经过时了,用法如下:
123
这个标签就是相对于
标签里的文字,可以使其居中。
由于标签已经过时了,所以正规一点的话还是不建议使用的css居中样式,可以使用如下的方式代替:
123
Html如何设置元素垂直居中?
1.单行文本是通过设置父元素的 和 line- 高度一致来完成的,其中是指元素的高度, line- 是指行间距。
案例:
写一个
我是单行文本css居中样式 css垂直居中,div+css页面居中代码?,我想垂直居中
效果如图:
2.在
结果如图:
3.父元素的高度确定,table标签包裹然后设置-align:
案例:
写三个
我是多行文本1css居中样式,我想垂直居中
我是多行文本2,我想垂直居中
我是多行文本3,我想垂直居中
效果如图:
4.table(因为td 标签默认情况下就默认设置了 -align 为 。所以不用重新再写 -align:)标签包裹代码设置和效果图如下: