css设置元素在页面居中的的各种方式

最新推荐文章于 2024-04-16 18:33:04 发布
最新推荐文章于 2024-04-16 18:33:04 发布
阅读量1k 收藏 1
点赞数
文章标签： html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Y0admin/article/details/119418171
版权

方法一：margin + width

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!Doctype html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

<title>css布局水平居中margin + width</title>

<style type="text/css">

*{margin:0;padding:0;}

.box{

width:100px;

margin:0 auto;

background:red;

}

</style>

</head>

<body>

<div class="box">Demo</div>

</body>

</html>

       这个水平居中方法，我们最熟悉了，也是最常用的，width可以固定px也可以使用百分比

方法二：table + margin

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<!Doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

    <title>css布局水平居中table + margin</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        .box{

            display: table;

            margin: 0 auto;

            background:red;

        }

    </style>

</head>

<body>

    <div class="box">Demo</div>

</body>

</html>

       说明：display: table在表现上类似block元素，但是宽度为内容宽。无需设置父元素样式 （支持 IE 8 及其以上版本）兼容 IE 8 一下版本需要调整为<table>

方法三：inline-block + text-align

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

<!Doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

    <title>css布局水平居中inline-block + text-align</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        .content{

            text-align:center;

        }

        .box{

            display:inline-block;

            background: red;

        }

    </style>

</head>

<body>

<div class="content">

     <div class="box">Demo</div>

</div>

</body>

</html>

       说明：兼容性佳（甚至可以兼容 IE 6 和 IE 7）

方法四：absolute + margin-left

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

<!Doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

    <title>css布局水平居中absolute + margin-left</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        .content{

            position: relative;

        }

        .box{

            position: absolute;

            left: 50%;

            width: 100px;

            margin-left: -50px;

            background: red;

        }

    </style>

</head>

<body>

<div class="content">

     <div class="box">Demo</div>

</div>

</body>

</html>

       说明：宽度固定相比于使用transform ，有兼容性更好

方法五：absolute + transform

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

<!Doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

    <title>css布局水平居中absolute + transform</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        .content{

            position: relative;

        }

        .box{

            position: absolute;

            left: 50%;

            transform: translateX(-50%);

            background: red;

        }

    </style>

</head>

<body>

<div class="content">

     <div class="box">Demo</div>

</div>

</body>

</html>

        说明：绝对定位脱离文档流，不会对后续元素的布局造成影响。transform为 CSS3 属性，有兼容性问题

方法六：flex + justify-content

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

<!Doctype html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=GBK"/>

    <title>css布局水平居中flex + justify-content</title>

    <style type="text/css">

        *{margin:0;padding:0;}

        .content{

            display: flex;

            justify-content: center;

        }

        .box{

            width: 100px;

            background: red;

        }

    </style>

</head>

<body>

<div class="content">

    <div class="box">Demo</div>

</div>

</body>

</html>

       说明：只需设置父节点属性，无需设置子元素flex有兼容性问题

LuckySoong
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
五种方法让CSS实现居中显示
html基础教程
02-27 1761
使用 CSS 实现垂直居中并不容易。有些方法在一些浏览器中无效。下面我们看一下使对象垂直集中的5种不同方法，以及它们各自的优缺点。 方法一 这个方法把一些 div 的显示方式设置为表格，因此我们可以使用表格的 vertical-align property 属性。 <div id="wrapper"> <div id="cell"> <div class=...
元素/图片垂直居中
车明强的博客
09-14 583
div固定垂直居中 代码： 第一种方法 第二种方法 效果： 图片/元素在块里垂直居中 高度小的找高度高的 元素的话先转成行内块元素 方法： 设置元素在容器内垂直居中，必须更改默认display属性为行内块元素inline-block vertical-align：middle 。 加上同级元素（标尺作用）样式设置为宽为0高为100% display-inlineblock vertical-align：middle; 再给大盒子一个text-align：cen...
css元素如何居中
最新发布
qq_42808052的博客
04-16 664
css元素如何居中
css实现文本内容水平居中的4个方法
爱分享
03-31 5919
以上是几种实现文本垂直居中和水平居中的方式，每种方式都有其适用的场景和优缺点。其中，利用margin:auto和position:absolute的方式需要知道元素的宽度和高度，适用于元素宽高固定的情况。利用table的方式比较适用于多行文本的垂直居中。可以给父元素设置display: flex，并给子元素设置align-items和justify-content属性来实现文本的水平垂直居中。利用position: absolute和top、bottom、left、right属性来实现文本的水平垂直居中。
一文搞定css居中方式
weixin_47121832的博客
02-12 3063
css居中方式大总结
10 个CSS实现元素居中的方法汇总
web前端开发
07-27 985
英文 | https://javascript.plainenglish.io/10-css-tricks-you-should-know-for-centering-elements-61092d35b659翻译 | 杨小爱在前端开发工程师的日常生活中，使用 CSS 使元素居中是很常见的，这也是面试中经常被问到的问题。也许你已经使用 flex 或 absolute + ...
CSS 7种居中效果实现原理与案例
LlanyW的专栏
03-18 3189
左右偏移量+可见框宽度+左右外边距=包含块宽度。上下偏移量+可见框高度+上下外边距=包含块高度。配置项比较多，也是要指定盒子大小。/*绝对定位与变形结合实现：垂直水平居中*/让内部的文字在中间显示。
利用CSS让页面元素居中的方案
u012925833的博客
04-13 298
页面元素居中是我们开发过程中常遇到的问题，同时也是面试中经常被提及的问题，所以我们必须熟练掌握 初始样式 <style> .container { width: 500px; height: 500px; background-color: pink; } .inner { width: 200px; height: 200px...
css让元素水平居中的十种方式
XiehaiyanLI的博客
09-10 473
平常布局让元素水平居中用的方法来来回回就几种，今天才知道原来方法有很多，今天就记下来
利用css设置元素垂直居中的解决方法汇总
09-24
在Web页面设计中，元素的水平垂直居中布局是一项常见的挑战，尤其是垂直居中，往往需要灵活运用各种CSS技巧。以下是一些实用的CSS方法，帮助你解决元素垂直居中的问题。 1. **行内文本垂直居中** 对于行内文本，如...
css实现元素水平垂直居中常见的两种方式实例详解
09-24
在CSS布局设计中，使元素水平垂直居中是一项常见的需求。本文将详细解析两种主流的实现方法，并通过实例代码进行演示。 首先，我们来看第一种方法：使用`flexbox`(弹性盒模型)布局。Flexbox是CSS3引入的一种布局...
div居中显示的css样式代码
09-25
div居中的使用还是比较广泛的，在本文有个不错的示例，可以帮助大家更好的理解div居中显示，感兴趣的朋友不要错过
css如何让浮动元素水平居中
09-03
在本文中，我们将探讨几种使浮动元素在页面中水平居中的方法。 方法一： 这种方法利用了相对定位和浮动的组合。HTML部分包含一个父级`.box`和两个子元素`<p>`。CSS中，父级元素`.box`设置为左浮动并相对定位，`left...
关于css 行元素和块元素 相互转换 居中
09-24
在CSS布局中，行元素和块元素是两种基本的元素类型，它们的特性和转换方法对网页设计至关重要。本文将详细介绍这两种元素的概念、特点以及如何实现居中对齐。 首先，块级元素如`div`、`h1`或`p`等，它们在页面布局...
8种css居中实现的详细实现方式了
buruyang的博客
07-12 2万+
八种实现方式，拿去用吧
css实现元素居中的6种方法
热门推荐
富朝阳的博客
09-22 4万+
相信大家在面试的时候也会经常碰到css实现元素居中的方法，下面我介绍6种方法给大家，欢迎大家评论区交流。给定两个元素，这两个元素是父子级关系并且两个元素的大小都是不确定的，那么这时候如何让子级在父级中上下左右都居中？（暂且设定父级比子级要大一些）。
css常见居中方法总结
weixin_51472145的博客
05-28 4万+
最近跟着网上的教程做了几个网页项目，做的过程中关于居中涉及到了好几种方法，遂想将其总结归纳下来，一是理清自己的思路，而是希望能分享给需要帮助的小伙伴们。 话不多数，直奔主题。 本次涉及到的居中方法有七种，均为平时会常用到的。 目录 1.text-align:center 用于水平对齐 2.使用line-height属性来调整文本行高来实现居中 3.vertical-align设置垂直对齐 4.background-position来设置水平/垂直方向位置 5 修改Padding值来使Con.
CSS中实现元素居中的七种方法
_江屿_
11-22 2050
CSS中实现元素居中的七种方法
8 种CSS实现内容居中的方法
web前端开发
12-18 5472
关于CSS实现内容居中的方式有很多种，在今天这篇文章里，我给大家整理了8种实现内容居中的方式，希望这些方法对你学习和使用CSS进行开发有帮助。1. Flex可能是当今最流行和最简单的居中方式，我可以放心地承认，当我可以使用 text-align: center 代替时，我使用它来对齐段落。.flexbox-row { display: flex; flex-direction: row; ...
css 元素位置在中间居中
05-16
要将一个元素在页面上水平垂直居中，可以使用如下的 CSS 代码： ```css .element { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 其中， `position: absolute` 让元素...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值