石家庄做网站,石家庄网站优化,石家庄网络推广,石家庄网络公司
当前位置:主页 > 新闻资讯 > 网站设计 >

DIV居中之div水平居中

发表日期:2021-03-12 11:11文章编辑:优搜客浏览次数: 标签: 网站建设教程|网站设计教程|div|div居中|    

DIV居中之div水平居中 让DIV布局居中
1. 实现DIV水平居中
设置DIV的宽高,使用margin设置边距0 auto,CSS自动算出左右边距,使得DIV居中。
 div{
    width: 100px;
     height: 100px;
     margin: 0 auto;
 }
    缺点:需要设置div的宽度
2. 实现DIV水平、垂直居中
要让DIV水平和垂直居中,必需知道该DIV得宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该DIV分别左移和上移,左移和上移的大小就是该DIV宽度和高度的一半。
 div{
     width: 100px;
     height: 100px;
     position: absolute;
     left: 50%;
     top: 50%;
     margin: -50px 0 0 -50px;
 }
  缺点:需要设置position属性,网页复杂时容易扰乱页面布局,而且只是元素的起始位置居中
3. 文本在DIV中水平、垂直居中(text-align + line-height)
1)text-align 属性规定(块级)元素内文本的水平对齐方式。
2)line-height = height,行高等于元素高度,用来实现垂直居中。
 div{
    width:200px;height:200px;  /*设置div的大小*/
   border:1px solid green;    /*边框*/
     text-align: center;        /*文字水平居中对齐*/
     line-height: 200px;        /*设置文字行距等于div的高度*/
     overflow:hidden;
 }

如没特殊注明,文章均来自网络!转载请注明来自:https://www.yousouke.com/News/wzsj/39862.html
返回列表

网站设计案例推荐

热门新闻

HTML实现检测输入已完成功能

石家庄企业网站做好网站结构优化的重要性

石家庄网站建设:建站收费依据的标准

css代码优化的12个技巧

HTML中的if判断用法

HTML实现title 属性换行小技巧

浅谈HTML中src和href之间的区别

两个div之间有空隙的解决方法

相关新闻

两个div之间有空隙的解决方法

让2个DIV居中并排显示

推荐新闻

DIV居中之div水平居中

【石家庄网站建设】网站设计的三个关键点

商城网站建设需要注意的功能

石家庄企业网站做好网站结构优化的重要性

HTML中的if判断用法

JSP的九大内置对象及其作用

石家庄网站建设:建站收费依据的标准

Html5之自定义属性(data-,dataset)

【石家庄网站建设】企业网页设计需要有哪些基本功?