页面div居中布局的几种方法比较

最新推荐文章于 2023-08-13 00:34:20 发布
最新推荐文章于 2023-08-13 00:34:20 发布
阅读量1.1k 收藏 3
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44543271/article/details/87857889
版权
本文介绍了三种使div在页面居中的方法，包括像素定位、百分比设置和flex布局，并分析了各自的效果。其中，flex布局表现出色，能实现垂直和水平的完美居中。同时，文章简述了flex容器与flex项目的相关属性。
摘要由CSDN通过智能技术生成

开发工具与关键技术：DW css
作者：江金燕
撰写时间：2019、2、17

下面是我写网页时记录div在页面居中的方法并进行了一点效果对比
一、 第一种居中主要是通过设计多少像素来设计居中的
代码与效果图如下
在这里插入图片描述
看法：对于运用像素来设计元素居中达到的效果并不是很理想：首先我们要对像素值进行不断的调整，即使如此达到的效果也不完美 毕竟像素总有差异
二、 第二种主要是通过百分比来完成的 主要就是对上下左右设计百分比 这里主要运用上
代码与效果图如下
在这里插入图片描述
看法：大家可以看到我上外边距离设计了50% 可是效果却大到我想要居中的效果
三、第三种主要是运用flex布局弄的
代码与效果图如下
在这里插入图片描述
看法：大家可以看到对比前两个方法 第三种是唯一达到垂直和水平居中的完美效果：使用felx布局可以为页面格式布局提供具有更大的灵活性。

以上是三种居中的方法

知识扩展：flex容器与flex项目
Flex容器有六大属性 （常用的有）
一、 Flex—direction属性 包括四个值
二、 flex—wrap属性（少用）

最低0.47元/天 解锁文章
不负遇见。。。
关注
CSS设置DIV垂直居中的N种方法 兼容IE浏览器
09-27
对于有固定高度并且包含多行文本的`div`，可以使用以下几种方法： 1. **使用绝对定位**： 创建一个内部`div`，设置其`position: absolute; top: 50%;`，然后通过负的`margin-top`值等于内部元素高度的一半来调整。...
DIV居中及DIV垂直居中.html
05-16
该html代码是实现DIV居中及DIV垂直居中的实例,包括: div居中, div内文本居中及垂直居中, div嵌套div并居中, div嵌套div并垂直居中.
三种div居中显示方式
weixin_30786617的博客
12-11 1344
转载于:https://www.cnblogs.com/prolion/p/7887182.html
div布局中将页面居中的方法
weixin_33756418的博客
06-17 61
margin: 0 auto; 将边界的上和下设置为0,0 将右和左设置为自动; 别忘了定位模式用相对 position: relative;
div居中方法（共8种）
热门推荐
qq_41425194的博客
04-25 11万+
水平居中 1.行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 2.块级元素：为其自身设置margin:auto样式 <div st
div在页面中居中
技术笔记博客
05-04 788
.login{ width:650px; height:400px; position:absolute; left:50%; top:50%; margin-left:-300px; margin-top:-230px; border:solid #000 1px; }
DIV+CSS DIV居中布局
03-19
在CSS中，居中布局通常涉及以下几种方法： 1. **margin auto**： 这是最常见的一种居中方法，适用于知道元素宽度的情况。设置`margin-left`和`margin-right`为`auto`，可以使`<div>`在父容器中水平居中。例如： `...
css3 flex实现div内容水平垂直居中的几种方法
11-21
总的来说，CSS3的Flexbox布局提供了一种强大的方法来处理元素的布局和对齐，使得水平垂直居中变得简单而直观。通过熟练掌握这些基本属性，开发者可以构建出更复杂、更适应不同屏幕尺寸的网页布局。
div垂直居中的N种方法 单行/多行文字(未知高度/固定高度)
09-22
在网页设计中，让元素在页面上垂直居中是一项常见的需求。对于`div`元素，尤其是包含单行或多行文本的情况，有多种方法可以实现垂直居中。以下将详细介绍几种常见的方式： 1. **单行垂直居中** 对于只有一行文字...
div 中元素居中的N种常用方法
最新发布
u011799045的专栏
08-13 2万+
div 中元素居中的N种常用方法
怎么设置DIV模块在页面中居中?
qq_40112624的博客
04-10 8501
margin、padding可以让div模块在页面居中，但如果是自适应所有屏幕，包括手机屏幕依然可以自动上下左右居中，该怎么设置呢？下面我们就来看看详细的教程。 先新建一个html文件，并在head中添加样式表【】。 在body中添加一个DIV，并引入一个CSS，命名为【aaa】。 给这个DIV添加背景色，并定义它的宽和高。【background: #FA2;width: 400px;heig...
div css布局怎么居中,如何实现div+css居中布局
weixin_39620197的博客
08-04 712
我们在设计网页时，首先需要确定网页主体内容如何布局。纵观各大网站，网页主体内容布局一般都采取居中浏览器的方式。我们课课家的首页也不例外。那么如何使用css让整个网页布局居中呢？其实方法很简单，下面小编就为大家介绍一下。要设置网页主体内容居中，我们只需简单两步就可以实现：第一步：对body设置CSS内容居中样式，代码为:body{text-align:center}第二步:对最外层对象设置margi...
设置div居中的方法
xufang461010923的专栏
07-12 2万+
对div居中方法的总结，包括 position 定位、flex布局、margin 等知识点
如何使得一个div在页面居中显示
南城趣味的博客
11-17 2219
想要实现一个div在页面居中显示,然后无从下手，面向百度了解了一下大佬们的方法，这才一脸醒悟: 方法一： 使div绝对定位，然后left与top各设置50%,再设置margin-top为高度的负一半值，margin-left为宽度的负一半值即可 div{ width: 300px; height: 40...
（史上最全）div居中的几种方法
weixin_33796205的博客
04-15 2629
使div水平垂直居中1. flex 布局实现 （元素已知宽度）效果图：内部 div 要有宽度CSS 代码: <style> .box{ width: 300px; height: 300px; background-color: #ccc; ...
div居中方法（共9种）
qq_36608036的博客
02-25 7万+
div居中方法（共8种） 水平居中 行级元素：为该行级元素的父元素设置text-align:center配合line-height样式 <div style="width: 500px;height: 100px;line-height: 100px;border: 1px solid green;text-align:center;"> <span>行级元素</span> </div> 块级元素：为其自身设置margin:auto样式 <di
让div居中的方式的几种方法
恒二哥的博客
11-04 7万+
div垂直居中的几种方式
CSS网页布局：DIV水平居中技巧
以下是几种常见的方法： 1. **文本内容居中：text-align:center** 当你需要使div内的文本内容居中时，可以使用`text-align:center`属性。例如： ```css .container { text-align: center; } ``` 这将使`....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值