垂直水平居中的3种方法

最新推荐文章于 2023-10-10 15:56:39 发布
最新推荐文章于 2023-10-10 15:56:39 发布
阅读量348 收藏
点赞数
分类专栏： 前端学习笔记 文章标签： 水平垂直居中
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42862614/article/details/85859024
版权

垂直水平居中

这篇文章结合了 垂直居中和水平居中来进行设置 垂直水平居中，单独垂直居中和水平居中可以看我之前的文章

1.display:inline-block text-align:center (水平居中) + display:table-cell vertical-align:middle（垂直居中）
在这里插入图片描述

2.absolute + transform

在这里插入图片描述

3.display:flex + justify-content:center + align-items:center

在这里插入图片描述

大牧师
关注
专栏目录
元素水平垂直居中的几种方法
01-20
首先，我们来看第一种方法，通过`margin: auto`实现水平居中，但这种方法无法实现垂直居中。示例代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; } #box2 { width: 100px; ...
css3 flex实现div内容水平垂直居中的几种方法
11-21
总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。
垂直水平居中的几种方式
qq_41111677的博客
08-24 236
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } /*越往下兼容性越不好*/ .p1 { width:.
垂直水平居中的三种实现方式
XYZ
08-04 1193
今天向一位朋友请教垂直水平居中问题，没想到朋友直接给出了三种实现方式，这里记录下来。 如图所示，登陆页中有一个登陆表单，我们需要将表单内容垂直水平居中。 这里，为了简单起见，以如下的html为例： <div class='a1'> <div class="a2">需要垂直水平居中的元素</div> </div> 样式初始化 *{ margin:0; padding:0; } html, body{ height: 100%; } 最终我们想要实
让一个元素垂直水平居中的三种方法【转】
weixin_30340745的博客
12-05 111
第一种方法: div.box{ weight:200px; height:400px; <!--把元素变成定位元素--> position:absolute; <!--设置元素的定位位置，距离上、左都为50%--> left:50%; top:50%; <!--设置元素的左外边距、上外边距为宽高的负1/2--> margin-left:-10...
CSS 水平垂直居中方式详解
liuqiao0327的专栏
08-18 271
CSS 水平垂直居中方式 文章目录CSS 水平垂直居中方式1.绝对定位 absolute 负margin1.优点2.缺点2.绝对定位 absolute margin:auto1.优点2.缺点3.绝对定位 absolute calc1.优点2.缺点4.绝对定位 absolute transform1.优点2.缺点5.flex布局1.优点2.缺点6.table表格7.grid布局1.父元素指定子元素对齐方式:2.子元素指定自己的对齐方式:8.空元素span9.总结 1.绝对定位 absolute 负margin
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
CSS水平垂直居中的几种方法总结
09-24
以下就是CSS实现水平垂直居中的几种常见方法： 1. 利用margin:auto实现居中 这是一种常见的居中方式，通常用于块级元素。通过设置元素的position属性为relative，并把left和top属性设为0，再将margin设为auto，...
使用CSS实现盒子水平垂直居中的方法(8种)
01-18
原始代码： center.html： <!DOCTYPE html> <html lang=Zh> <head> <meta charset=UTF-8> <meta name=viewport content=width=device-width, initial-scale=1.0>...
CSS水平垂直居中的方法（Flex、Grid、translate、margin..）
最新发布
qq_44396859的博客
10-10 1113
其实网上还有一些神通广大的网友的方法能够实现，但由于代码量的问题或者副作用的问题较多，就不再赘述，本文介绍的以上几种方法按照顺序依次推荐。参考链接：元素水平垂直居中都有哪些方法 - 简书。
垂直水平居中的几种实现方式
qq_42576785的博客
11-13 214
一.使用弹性盒模型 display: flex      1. 在你不知道当前元素的宽高的情况下 你可以为父元素设置 display: flex;样式 并设置 align-items: center； justify-content: center    2. 还有种情况就是你知道为元素设置position: absolute; top: 50%; left: 50%; transform:...
元素水平垂直居中的三种方式
running8的博客
08-08 341
仅水平居中比较简单：margin:0 auto; 或者：margin:100px auto;  &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;/h
实现垂直水平居中的几种方法
bobringtheboys的博客
08-05 320
实现垂直水平居中的几种方法 <body> <div id="box1"> <div id="box2"></div> </div> </body> 一、已知需要居中盒子的宽高 1.需要居中的盒子绝对定位，设置top:50%;left:50%;margin-top:负高度的一般;margin-left:负宽度的一半。 #box1{ width: 300px; height:300px;
几种常用垂直水平居中的方式
weixin_44965420的博客
02-10 367
本文总结了一下CSS实现水平垂直居中常用的方式有下面这些
【前端-css】div填充中间剩余位置
refealbellic的博客
08-21 529
两个各有各div。中间的div填满 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>div测试</title> </head> <style> #one { background-color: aliceblue; width: 100%; hei
元素水平垂直居中的几种方式（简单直接）
木易的博客
09-01 756
前端项目开发时，我们在页面布局的时候，经常会遇到让一个元素水平垂直居中，实现的方式很多，下面就来简单总结下，直接上代码，需要的可以直接使用： 方式1 <body> <div class="wrap"></div> </body> .wrap{ width: 100px; height: 100px; position: absolute; left: 0px; right: 0px; bottom:..
垂直水平居中的方法
weixin_43730646的博客
02-26 181
//宽高未知 //第一种定位 .box { background-color: #ccc; width: 300px; height: 300px; position: relative; } .content { background-color: #999999; width: 100px; height: 100px; position: absolute; ...
CSS布局：探索15种水平垂直居中方法详解
本文档主要探讨了CSS布局中关于水平和垂直居中的多种方法，针对这两种常见的布局需求，作者提供了几种实用的解决方案。首先，让我们深入了解这些方法： 1. **最常见的margin方法**：这种方法通过设置元素的宽度，并...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值