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

如何使一个盒子水平垂直居中(常用的)

目录

1. 使用Flex布局

 2. 使用Grid布局

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

 4.绝对定位+外边距 auto 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)


1. 使用Flex布局

如何实现:

在父元素上添加:

            display: flex;

            align-items: center;

            justify-content: center;

<style>* {padding: 0;margin: 0;}.parent {display: flex;/* 水平居中 */justify-content: center; /* 垂直居中 */align-items: center;width: 500px;height: 500px;background-color: aqua;}.child {width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 2. 使用Grid布局

 如何实现:

在父元素上添加:

        display: grid;

        place-items: center;

    <style>* {padding: 0;margin: 0;}.parent {display: grid;/* 水平和垂直方向都居中对齐 */place-items: center;width: 500px;height: 500px;background-color: aqua;}.child {width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

3.绝对定位 + 负外边距  (必须知晓盒子的具体大小)

相对父级上边和左边,或者下边和右边各移动50%,同时通过外边距减去自身的宽高各一半的大小。

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 50%;

            left: 50%;

            margin-top: -100px;  //子元素高度的一半

            margin-left: -100px;  //子元素宽度的一半

 

    <style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 50%;left: 50%;margin-top: -100px;//子元素高度的一半margin-left: -100px;//子元素宽度的一半width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 4.绝对定位+外边距 auto 

将盒子的上下左右定位全部设置为0,同时设置外边距自适应

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 0;

            bottom: 0;

            left: 0;

            right: 0;

            margin: auto;

    <style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 0;bottom: 0;left: 0;right: 0;margin: auto;width: 200px;height: 200px;background-color: pink;}</style><body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 

 5.绝对定位 + transform   (无须知晓盒子的具体大小)

使用CSS3中的新属性transform: translate(-50%,-50%); 来直接减去盒子自身的50%大小

如何实现:

在父元素上添加:

         position: relative;

在子元素上添加:

            position: absolute;

            top: 50%;

            left: 50%;

            transform: translate(-50%,-50%);

   <style>* {padding: 0;margin: 0;}.parent {position: relative;width: 500px;height: 500px;background-color: aqua;}.child {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);width: 200px;height: 200px;background-color: pink;}</style>
<body><div class="parent"><div class="child">我要水平垂直居中</div></div>
</body>

 

 

http://www.lryc.cn/news/398473.html

相关文章:

  • 安全防御-用户认证综合实验
  • uniapp安卓离线打包配置scheme url
  • C++ STL std::lexicographical_compare用法和实现
  • ORM Bee,如何使用Oracle的TO_DATE函数?
  • HTML CSS 基础复习笔记 - 框架、装饰、弹性盒子
  • C++:创建线程
  • python如何查看类的函数
  • P6. 对局列表和排行榜功能
  • uniapp easycom组件冲突
  • 总结24个Python接单赚钱平台与详细教程,兼职月入5000+
  • macOS 的电源适配器设置
  • 视觉SLAM与定位之一前端特征点及匹配
  • 开源项目的认识理解
  • 37.哀家要长脑子了!--层序遍历
  • 【从零开始AI绘画6】StableDiffusionWebUI拓展的安装方法以及推荐的几个拓展
  • HTML5表单的自动验证、取消验证、自定义错误信息
  • SpringMVC系列九: 数据格式化与验证及国际化
  • 判断链表中是否有环(力扣141.环形链表)
  • Kubernetes基于helm部署jenkins
  • 【Linux】vim详解
  • Android11 mtk 第二次设置壁纸,锁屏壁纸不变的问题
  • Java学习路线
  • java 实现人脸检测
  • VSCode神仙插件——Codeium (AI编程助手)
  • css文本划线效果(text-decoration相关属性详解)
  • 《Windows API每日一练》8.5 listbox控件
  • 使用Node.js 框架( Express.js)来创建一个简单的 API 端点
  • 企业服务行业CRM解决方案
  • 服务器怎么进PE系统?
  • Linux内核编译与调试menuos-linux-3.18.6-在ubuntu20.04环境