【无标题】水平垂直居中的3种方法

最新推荐文章于 2024-09-28 15:35:33 发布
最新推荐文章于 2024-09-28 15:35:33 发布
阅读量160 收藏
点赞数
分类专栏： 垂直居中 文章标签： css css3 html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57320268/article/details/121848243
版权

CSS 绝对定位 居中 布局 负margin
关键词由CSDN通过智能技术生成

1-绝对位移居中

 /* 1 让子盒子移动父元素的一半(往右) */

left: 50%;

/*让子盒子移动父元素的一半(往下) */

top: 50%;

/* 2 在让子盒子往左移动自身宽度的一半 使用margin负值 */

/* 普通做法 */

margin-left: -150px;

/* 在让子盒子往上移动自身高度的一半 使用margin负值 */

margin-top: -100px;

2位移-绝对定位居中

3

精力充沛的码农
关注
专栏目录
HTML/CSS常见的几种水平居中、垂直居中、水平垂直居中方法
m0_54889555的博客
02-07 2万+
HTML/CSS常见的几种水平居中、垂直居中、水平居中方式 一、水平居中 1.第一种方式 在css中使用text-align和display属性 <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>第一种居中方式</title> <style>
CSS中垂直居中的七种方法
m0_48982503的博客
10-08 5177
前言： 我们在编辑一个版面，通常都会用到水平居中和垂直居中来设计，而水平居中很好处理，不外乎就是设定margin:0 auto；或是text-align:center；，就可以轻松解决掉水平居中的问题，但一直以来最麻烦对齐问题，都是“垂直居中”这个讨人厌的设定，以下将介绍七种单纯利用CSS垂直居中的方式。 七种垂直居中的方法： 设定行高（line-height） 添加伪元素 calc动态计算 使用表格或假装表格 transform 绝对定位 使用Flexbox 设定行高（line-hei.
【Web】CSS水平垂直居中常见方法总结
热门推荐
沙师弟专栏
05-05 2万+
文章目录一、简介二、元素水平居中三、元素水平垂直居中3.1 position 元素已知宽度3.2 position transform 元素未知宽度3.3 flex布局3.4 table-cell布局 一、简介 说明：本篇文章只是总结一些方法，例子用到的各个元素属性不做解释，详情请看MDN文档，非常的详尽，例子在chrome浏览器下完全好使，IE这个渣渣。 本文出现的错误，请大佬们及时指正，人非圣...
HTML水平垂直居中的四种方式
weixin_44961514的博客
08-16 4202
第一种方式是使用margin进行移动 水平居中 margin:0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, i
前端垂直水平居中的3种方式
沈行的博客
09-03 866
CSS居中 所有例子共用以下代码 <!--html--> <div class="outers"> <div class="inners"> </div> </div> 绝对定位 方法一： 50%的父元素宽高减去自身宽高的50% /*css*/ .outers { width: 500px; height: 300px; bo
【HTML元素居中】元素水平垂直居中的常用方法
qq_32768761的博客
09-20 823
html行元素、块元素的多种居中方法。
水平垂直居中
m0_49471668的博客
03-15 4821
<style> .wrap { width: 600px; height: 600px; border: 2px solid purple; } .item { width: 150px; height: 150px; background-color: seagreen; } ...
css 实现垂直居中的五种方法
weixin_47192515的博客
08-31 3071
css实现垂直居中的五种方法
水平居中、垂直居中和水平垂直居中
chedannaxieshang的博客
04-01 1361
一、水平居中的方式 1、行内元素 给行内元素的父元素设置 text-align：center。 （注：text-align：center对块级元素没有效果） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div{ width:
如何将一个div水平垂直居中？6种方法做推荐
一键写代码的博客
06-04 4994
如何将一个div水平垂直居中？6种方法做推荐欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导...
设置一个层在浏览器中同时左右居中上下居中水平垂直居中
09-25
通过这种方法，我们可以确保元素在任何屏幕尺寸下都能保持水平垂直居中。需要注意的是，此方法适用于元素的父容器具有固定宽度和高度的情况。如果父容器大小不固定，可以考虑使用Flexbox或Grid布局来实现更灵活的...
css水平垂直居中
06-11
### CSS 水平垂直居中的实现方法 在前端开发中，经常需要将元素在页面中进行水平垂直居中处理，特别是在响应式布局或者需要精确控制元素位置的情况下尤为重要。本篇文章将详细介绍如何通过 CSS 实现内容的水平垂直...
Winform TextBox支持垂直居中自定义控件
03-05
在给定的标题和描述中，我们看到开发者已经实现了一个这样的自定义控件，它不仅支持文字垂直居中，而且在开启自动折行（WordWrap=True）时也能保持垂直居中的效果。 首先，让我们深入了解如何在C#中创建自定义控件...
使用bootstrap的H5页面登录框自适应水平居中、垂直居中
07-18
对于垂直居中，Bootstrap本身没有提供内置的解决方案，但我们可以通过以下几种方法来实现： 1. 使用Flexbox：Bootstrap4开始支持Flexbox，可以为父容器添加`d-flex`, `align-items-center`类，这将在所有支持...
【CSS in Depth 2 精译_039】6.3 CSS 定位技术之：相对定位（上）
PeacefulWinter的博客
09-25 901
本篇主要介绍了CSS的相对定位技术（relative positioning），通过一个下拉菜单的简单示例，详细讨论了相对定位的特点及适用场景，以及应用过程中需要考虑的一些问题（如页面可访问性等）。本节对上一版作了大幅更新，最后还针对正文提到了一个功能点进行了补充完善。感兴趣的朋友不妨动手试试，一定会有新的收获。建议先收藏！
CSS 的背景样式
最新发布
m0_74012211的博客
09-28 107
CSS 的背景
CSS05-复合选择器
qq_31532983的博客
09-24 270
后代选择器、子类选择器、并集选择器、伪类选择器（链接伪类、focus伪类）
基于Next.js和TailwindCss的TailwindCss
hanzi552200的博客
09-25 268
最近在研究 Next.js 和 TailwindCss ，这两天没事的时候就搞了一个 c。目前工具部署在 Vercel ，欢迎各位体验（能提出意见更好嘿嘿）
如何只用 CSS 制作网格？
偶尔记一下 - mybatis.io
09-24 1059
在看这篇文章时，对其中的网格比较好奇，作者提供了 stackoverflow 的链接，就看到了来源的这个问题和众多回复。本文从里面挑选了一些个人比较喜欢的样式，贴在下面展示。
CSS垂直居中技巧全解析：23种方法
"本文介绍了23种CSS垂直居中的技术，包括Line-height、Line-height结合inline-block等方法，适用于单行文字、多对象等多种场景。这些技巧对于网页布局和设计至关重要，有助于实现各种元素的完美对齐。" CSS垂直居中...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值