当前位置: 首页 > news >正文

怎么让块级元素水平和垂直都居中

在我们平时用DIVCSS布局网页的时候,经常碰到就是如何让div块水平和垂直都居中的情况,今天,建站教程网就给大家提供两种方法:

方式一:利用定位及负边距

<!DOCTYPE html>
<html>
    <head>
        <title>让块级元素水平和垂直都居中(方法一)</title>
        <meta charset="utf-8">
        <style>
            .wrapper {
                height: 600px;
                border: 1px solid red;
                position: relative;
            }
            .box {
                width: 120px;
                height: 120px;
                background: gold;
                position: absolute;
                left: 50%;
                top: 50%;
                margin-left: -50px;
                margin-top: -50px;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box"></div>
        </div>
    </body>
</html>

方式二:利用margin居中的方法

<!DOCTYPE html>
<html>
    <head>
        <title>让块级元素水平和垂直都居中(方法二)</title>
        <meta charset="utf-8">
        <style>
            .wrapper {
                height: 600px;
                border: 1px solid gray;
            }
            .box {
                width: 120px;
                height: 120px;
                background: gold;
                margin: 250px auto 0;
            }
        </style>
    </head>
    <body>
        <div class="wrapper">
            <div class="box"></div>
        </div>
    </body>
</html>

转载于:https://www.cnblogs.com/eaysun/p/3678465.html

相关文章:

  • 百度实习面经-JAVA研发方向
  • P1143 飘飘乎居士的约会
  • 让win7变成无线路由(需要用管理员权限打开)最后完善.rar
  • mysql 在大型应用中的架构演变
  • android 在布局中动态添加控件
  • JdbcTemplate+PageImpl实现多表分页查询
  • python os.path
  • 全国开设艺术类专业的211、985工程院校汇总
  • 优先队列的用法
  • 如何保持响应式设计新鲜感
  • 设计模式之Iterator模式
  • hbase rowkey设计的注意事项
  • SQL 必知必会
  • Javascript学习4 - 对象和数组
  • Ubuntu 14.04下安装GitLab指南
  • 【Leetcode】104. 二叉树的最大深度
  • 【个人向】《HTTP图解》阅后小结
  • AzureCon上微软宣布了哪些容器相关的重磅消息
  • Bootstrap JS插件Alert源码分析
  • Docker下部署自己的LNMP工作环境
  • go append函数以及写入
  • Javascript设计模式学习之Observer(观察者)模式
  • js作用域和this的理解
  • mongodb--安装和初步使用教程
  • PHP 的 SAPI 是个什么东西
  • SpriteKit 技巧之添加背景图片
  • 大整数乘法-表格法
  • 蓝海存储开关机注意事项总结
  • 码农张的Bug人生 - 初来乍到
  • 前端自动化解决方案
  • 跳前端坑前,先看看这个!!
  • 原生Ajax
  • ​sqlite3 --- SQLite 数据库 DB-API 2.0 接口模块​
  • #Lua:Lua调用C++生成的DLL库
  • $.each()与$(selector).each()
  • $con= MySQL有关填空题_2015年计算机二级考试《MySQL》提高练习题(10)
  • (1/2)敏捷实践指南 Agile Practice Guide ([美] Project Management institute 著)
  • (2)STL算法之元素计数
  • (JSP)EL——优化登录界面,获取对象,获取数据
  • (JS基础)String 类型
  • (附源码)spring boot校园健康监测管理系统 毕业设计 151047
  • (附源码)springboot 个人网页的网站 毕业设计031623
  • (十三)Java springcloud B2B2C o2o多用户商城 springcloud架构 - SSO单点登录之OAuth2.0 根据token获取用户信息(4)...
  • (四)Android布局类型(线性布局LinearLayout)
  • (转)memcache、redis缓存
  • .net core 依赖注入的基本用发
  • .Net Framework 4.x 程序到底运行在哪个 CLR 版本之上
  • .NET MVC第三章、三种传值方式
  • .net连接oracle数据库
  • .secret勒索病毒数据恢复|金蝶、用友、管家婆、OA、速达、ERP等软件数据库恢复
  • @开发者,一文搞懂什么是 C# 计时器!
  • [2023-年度总结]凡是过往,皆为序章
  • [ACL2022] Text Smoothing: 一种在文本分类任务上的数据增强方法
  • [C#基础知识]专题十三:全面解析对象集合初始化器、匿名类型和隐式类型
  • [cocos creator]EditBox,editing-return事件,清空输入框