CSS使页面内容居中的一种好用的方法

最新推荐文章于 2023-11-08 10:48:48 发布
最新推荐文章于 2023-11-08 10:48:48 发布
阅读量720 收藏 2
点赞数 1
分类专栏： Java基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37918817/article/details/81911280
版权

下面是一个小demo：让table居中显示

1.HTML代码

   <body>
        <div class="c1">
            <h3>用戶列表</h3>
            <table border="1px">
                <tr>
                    <td>序号</td>
                    <td>用户名</td>
                    <td>密码</td>
                    <td>真实姓名</td>
                    <td>年龄</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>xfh11</td>
                    <td>xfh11</td>
                    <td>Jeffrey</td>
                    <td>24</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>soon</td>
                    <td>soon</td>
                    <td>Ive</td>
                    <td>23</td>
                </tr>
            </table>
        </div>
    </body>

2. CSS样式如下设置

       <style>
            .c1{
                width:100%;
                display:flex;
                flex-direction:column;
                justify-content:space-around;
                align-items:center;
            }
        </style>

3. 效果展示

11Jeffrey
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
【华为OD机试 2023】 找数字、找等值元素（C++ Java JavaScript Python）
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
03-14 3766
给一个二维数组nums，对于每一个元素nums\[i\]，找出距离最近的且值相等的元素，输出横纵坐标差值的绝对值之和，如果没有等值元素，则输出-1。
css 让页面内容垂直居中
ayangjing的专栏
10-24 620
* { margin:0; padding:0; list-style:none; font-size:14px;}/*---该css reset仅用于demo，请自行换成适合您自己的css reset---*/ html { height:100%;} body { height:100%; text-align:center;} .centerDiv { display:in
css设置内容居中
qq_30228701的博客
10-15 941
1. 使用变换（Transform） （1）当元素的宽度和高度未知时； （2）卡片式弹出框中有多个子元素，其中一个焦点元素位于中心 center{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } 2. 使用Flex （1）当有一个或多个元素要居中时； （2）当子元素是动态的并且大小未知时； （3）当有一行项目需要像页脚一样居中时。 .parent { display:
CSS 让页面内容居中显示
ios0213的专栏
05-14 468
常见的如： #wrap{ width:80%px; margnin:0 auto; } 但是在这种方法在IE浏览器较低的版本中不支持，可以这样： #wrap{ width:80%px; margnin:0 auto; align:left; } 还可以这样： #wrap{ width:720px; position:relative; left:50%;
css实现页面居中的一种方法
weixin_30348519的博客
02-06 305
在网页制作的过程中，为方便读者的阅读，会把网页内容限定在一个较小的方框中，并居中显示，如何实现这一功能呢？ 1）把正文放在一个<div>标签中，只要这个标签居中整个网页就居中了。 <div id="text"> </div> 2）接下来要介绍一种方法：负边框，即margin 的值为负 #text{ padding-left:50%; ...
在 CSS 中使 Div 居中的 3 种不同方法
最新发布
11-20
在CSS布局设计中，使元素居中是一项基本但至关重要的任务。本文主要介绍了三种不同的方法，帮助您在网页设计中实现Div元素的居中对齐。以下是对这三种方法的详细说明： 1. 使用自动边距（margin: auto）： 这种方法...
CSS实现DIV居中的三种方法
12-13
以上四种方法都可以有效地实现`div`元素的居中对齐，但它们各有适用的场景。在实际开发中，根据项目需求和浏览器兼容性选择最合适的方法是非常重要的。例如，对于现代浏览器，Flexbox和Grid通常是首选，而对于老版本...
CSS 垂直居中五种实现方法
12-29
下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。(可以看看测试页面，有简短解释。) 方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。...
CSS垂直居中网页布局实现的5种方法
12-09
Flexbox布局是现代CSS布局的一种解决方案，它可以轻松实现元素的垂直居中。通过将父元素的`display`属性设置为`flex`，并添加`align-items: center;`，即可实现垂直居中。这种方法在现代浏览器中广泛支持，适应性强...
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
text-align:center 与 <center> 的区别
HaC 的博客
07-12 7038
下面通过一个例子来说明： 先贴代码：<div style="text-align:center"> 我是文字居中< <p>我也居中</p> <div style="display:block; width:200px; background-color:yellow;border:2px solid #F00;"> 我是块元素我不居中</div> </div><center> 我居中了 <p>我也居
利用CSS使网页居中对齐
ni_hao_ya的专栏
11-26 496
如何使DIV居中，主要的样式定义如下： body {TEXT-ALIGN: center;} #center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; } 说明： 首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义...
CSS样式之内容居中方法
knight-yun的博客
05-22 972
水平居中 HTML中要实现某一内容水平居中显示，要通过设置css样式来实现，主要分为行内元素和块状元素两种情况，块状元素又可分为块状定宽与块状不定宽两种情况，接下来依次介绍分析。 行内元素 像 a、span、i 这类元素叫做行内元素，文本和图片也是行内元素。行内元素水平居中方法简单，只需要给行内元素的父元素设置 text-align: center; css样式就内实现内容水平居中，例如： ...
CSS中让页面居中的技巧
xpnew的技术blog
09-13 4139
源地址：http://www.bikeroll.com/article.aspx?id=24 假设下面的布局：       有两种方法可以实现我们想要的效果1.使用自动空白边让设计居中：#wrapper { width:720px;margin:0 auto;}但是IE不支持自动空白边，幸运的是IE将text-align:center误解为让所有东西居中，所
前端-页面-css样式-文本居中
qq_41167655的博客
07-26 2344
div标签里面的style=" text-align:center "    如上 可以是页面input居中   未设置style=" text-align:center "  如下图 设置了style=" text-align:center " 如下图       感谢看官观看:下面拿出微信扫一扫二维码,有惊喜哦! :...
css居中方法
澄澈的博客
04-09 1295
自学
css内容居中
weixin_30894583的博客
10-29 99
方法一： 父级：text-alien：center; 子集：display:inline-block; css <style> .father{ text-align: center; /*position: relative; float: left; left: 50%;*/ } .father>d...
css常见居中方式
失眠时间的博客
11-08 468
页面布局基本都会有居中样式，包括水平居中、垂直居中等。
CSS的五种居中方式
weixin_46310510的博客
04-22 123
position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); 这种方法利用父级进行定位让子级实现居中 父级{ height: 100vh; display：flex； justify-content：center； align-items：center； } 子级{ width...
div+css布局实例：网页居中、内容垂直居中与层透明度
此外，另一种方法是通过设置内边距（padding）来实现，这提供了更大的灵活性，让开发者根据需要选择最适合的方法。 3. 层的透明度设置: 当需要创建半透明层以展示下层内容或增加视觉效果时，可以借助CSS的`filter:...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

11Jeffrey

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值