css中如何让div居中


本文摘自PHP中文网,作者藏色散人,侵删。

css中让div居中的方法:1、对div使用绝对布局“position:absolute;”;2、对div使用绝对布局并把top和left的值都设置为50%;3、通过css3的transform属性实现div居中。

本文操作环境:windows7系统、HTML5&&CSS3版、Dell G3电脑。

XHTML网站设计标准中,不再使用表格定位技术,而是采用css+div的方式实现各种定位。下面我们来看几种css设置div居中的方法。

方法一:对div使用绝对布局position:absolute;并设置top,left,right,bottom的值相等,但不一定都等于0;并且设置margin:auto。

2ef8b174aaf55d3dfa64cea74f86858.png

方法二:这个方法要知道div的宽度和高度。对div使用绝对布局position:absolute;并把top和left的值都设置为50%;50%就是指页面窗口的宽度和高度的50%;最后将div左移和上移,左移和上移的大小为div宽度和高度的一半。

7576b70262c0699027f1a9a96fe52b4.png

其中 margin-left:-100px 和 margin-top:-100px 可以写成 margin:-100px 0px 0px -100px

【推荐学习:css视频教程】

方法三:div使用绝对定位position:absolute,并且设置left和top的值都为50%。使用css3的transform属性。transform:translate(-50%,-50%)。

d4d3f502ff2eebc49d4d6fd7ac8d879.png

以上3种方法的效果如下显示

0aa80838746090d68bb88af18f33ab5.png

阅读剩余部分

相关阅读 >>

css边距怎么设置

css实现轮播图效果(附代码)

css text-shadow属性怎么用

css怎么让超链接不可用

css怎么删除一个样式

vue组件中如何引入css文件

css box-orient属性怎么用

css中width什么意思

css中如何调整图片位置

css如何清除定位

更多相关阅读请进入《css》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...