设为首页收藏本站
开启辅助访问 切换到宽版
快捷导航 发布信息
搜索
自丢网»社区论坛 › 建站程序/IT教程 › Css/Css3教程 › div让盒子水平垂直居中（水平居中，垂直也居中） ...

div让盒子水平垂直居中（水平居中，垂直也居中）

[复制链接]
查看1331 | 回复0 | 2020-7-23 13:45 | 显示全部楼层 |阅读模式
div让盒子水平垂直居中（水平居中，垂直也居中）
网站建设中，程序员经常编辑会遇到这个问题，如何让盒子居中并且垂直也居中，下面我们看个案例：
  1. <head>
  2.         <meta charset="utf-8">
  3.         <title></title>
  4.         <style type="text/css">
  5.                 .box{
  6.                         width:100px;
  7.                         height:100px;
  8.                         border:1px solid #000;
  9.                         position:absolute;/* 设置绝对定位 */
  10.                         top:50%;/* 设置上边偏移 */
  11.                         margin-left:-50px;/* 往左边移动自身宽度的一般 */
  12.                         left:50%;/* 设置做边偏移 */
  13.                         margin-top:-50px;/* 往上面移动自身高度的一半 */
  14.                 }
  15.         </style>
  16. </head>
  17. <body>
  18.         <div class="box"></div>
  19. </body>
复制代码

css教程, css3教程, css居中

相关帖子
回复

举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

admin

UID
1
贡献
387
丢币
38902
主题
4607
回帖
116
注册时间
2018-9-25
最后登录
2024-4-27
回复楼主 返回列表