前端CSS中简单且快速实现元素居中的方法

已于 2023-03-13 19:36:28 修改
阅读量455 收藏
点赞数
文章标签： 前端 css html
于 2023-03-13 18:56:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jclam/article/details/129501909
版权

一、水平居中（即横向纵向都位于盒子中间）

1、子元素设置：margin: 0 auto; line-height等于height；

<style>

        body{

           

        }

        .father{

            width: 300px;

            height: 300px;border: 1px solid #000;

            margin: 0 auto;

            display: flex;

           

        }

        .son{

            width: 100px;height: 100px;

            border: 1px solid #000;

            background-color: pink;

            align-self: center;

            margin: 0 auto;

            line-height: 100px;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

 2.利用绝对和相对定位（利用绝对相对定位有多种方法，以下只举例较为简便方法）

      absolute + transform

<style>

        body{

           

        }

        .father{

            width: 300px;

            height: 300px;border: 1px solid #000;

            position: relative;

           

        }

        .son{

            width: 100px;height: 100px;

            border: 1px solid #000;

            background-color: pink;

            position: absolute;

            left: 50%;

            top: 50%;

            transform: translate(-50%, -50%);

           

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

 absolute + margin: auto

<style>

        body{

           

        }

        .father{

            width: 300px;

            height: 300px;border: 1px solid #000;

            margin: 0 auto;

            position: relative;

           

        }

        .son{

            width: 100px;height: 100px;

            border: 1px solid #000;

            background-color: pink;

            position: absolute;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto;

           

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

 三、利用flex布局

<style>

        body{

           

        }

        .father{

            width: 300px;

            height: 300px;border: 1px solid #000;

            display: flex;

            justify-content: center;

            align-items: center;      

        }

//或者父元素设置display: flex;  子元素设置margin: auto;

        .son{

            width: 100px;height: 100px;

            border: 1px solid #000;

            background-color: pink;

           

           

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="son"></div>

    </div>

</body>

需掌握至少三种居中方法：

即单操作父元素居中display: flex; justify-content: center;align-items: center; ，

单操作子元素居中margin: 0 auto;line-height: 100px;，

以及操作俩者居中

position: relative;

position: absolute;

            left: 0;

            right: 0;

            top: 0;

            bottom: 0;

            margin: auto;

附：

        实现横向居中的简单方法：

元素设置 margin: 0 auto;

        实现元素纵向居中简单方法：

父元素设置 display: flex;  子元素设置align-self: center;

爱吃土豆的粉条
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS之居中布局的实现方法
01-19
在前端开发中，我们经常会遇到各种上不同场景的关于居中的布局，一般水平居中是相对简单，而 垂直居中与水平垂直则相应要麻烦些。在下来我们对各种场景一一列出解决方案。 水平居中 水平居中相对于其它几中居中排列要简单的多，按标签元素可分为行内元素与块级元素居中： 1、行内元素 如：a img span em b small 此类标签元素及文本 .center { text-align: center; } 2、块级元素 如：div section header p此类标签元素，需要设置宽度 .center { margin: 0 auto; } 垂直居中 1、line-height 针对有且仅有
css 垂直居中的几种实现方法
12-13
今天重新整理一下思路，说说前端在实现页面元素垂直居中的几种思路： 一、利用 position 和负边距 利用绝对定位，让元素的顶部与居中线对齐，再让元素上移 50% 的高度。这个应该不难理解。原理可以用下图来做一个...
水平垂直居中十种方法
G_XUI的博客
09-09 605
方法 第一种通过绝对定位的方式 absolute + 负margin 首先知道子元素的宽高，给子元素设置top：50%；left：50%， 但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位， 通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了 **优点：**比较好理解，兼容性好 **缺点：**需要知道子元素的宽高 第二种：也是通过绝对定位的方式 absolute + margin auto 这个是需要将各个方向
CSS实现垂直居中（八种）
摸鱼程序员
07-10 1万+
1. 使用line-height实现垂直居中 适合文本使用，子元素的line-height跟父元素的height一样即可 1.1 代码 <style> .div1 { width: 400px; height: 100px; background-color: blue; } p { line-height: 100px; } </style> <body> <div
CSS实现垂直居中的五种方法
AmeliaCui的博客
07-25 7434
CSS有许多方法可以实现垂直居中，但是选择合适的方法却很难。我将为你展示我见过的所有的最棒的方法以及如何创建一个精致小巧的居中网页。          使用CSS实现垂直居中并不是一件容易的事，有许多不同的方法，其中一些可能在某些浏览器中不生效。让我们来看看五种不同的垂直居中的方法和它们各自的优缺点（你可以看看我的测试页面（http://douglasheriot.com/tutorials/c
CSS垂直居中的12种实现方式
weixin_34348111的博客
01-15 373
使用绝对定位和负外边距对块级元素进行垂直居中 HTML &lt;div id="box"&gt; &lt;div id="child"&gt;&lt;/div&gt; &lt;/div&gt; 复制代码 CSS #box { width: 300px; height: 300px; background: #ddd; position: relative; ...
CSS实现垂直居中的5种方法
m0_56649557的博客
08-20 1万+
第一种 position定位+margin负距离 前提是知道居中元素的宽高，首先给居中元素定位，之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style> .box1 { height: 300px; width: 300px; border: 10px solid pink; position: relative; } .
css文字纵向排列且居中
aaassdf11的博客
06-08 1989
CSS文字纵向排列且居中的方法
css 居中问题的总结
qq_43889848的博客
05-15 2210
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
CSS垂直居中的方法
weixin_30511039的博客
08-11 136
方法1：display:flex+align-items 只需要给父元素设置属性 1 <style> 2 .box { 3 position: absolute; 4 width: 100px; 5 height: 100px; 6 border: 1p...
CSS实现水平垂直居中的6种方式
热门推荐
weixin_44370837的博客
05-11 3万+
大家好，我是小梅，公众号：「小梅的前端之路」 原创作者。 作为在前端领域不断探索的一员，在此记录开发中遇到的问题，如果你也遇到了相同的问题，希望本文对你有帮助。 在开发中经常需要实现的一个页面效果是：元素的垂直居中。 在此记录一下，经常适用的几种方法 前提：元素之前的布局关系如下，需要实现class为son该元素的垂直居中 <style> .son { width: 200px; height: 200px; background-color: p
前端Vue日常工作中-元素居中
12-19
前端Vue日常工作中--元素居中
利用css设置元素垂直居中的解决方法汇总
09-24
作为前端攻城师，在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，特别的其中的垂直居中，更是让人烦恼，下面这篇文章主要给大家汇总介绍了关于利用css设置元素垂直居中的解决方法，有了...
前端实现元素水平垂直居中的九种方式
06-30
前端实现元素水平垂直居中的九种方式
CSS实现垂直居中的7种方法
c_x_m的博客
03-04 1万+
CSS实现垂直居中的7种方法1、设定行高(line-height)2、设置伪元素::before3、absolute + transform4. 设置绝对定位5、设置display:flex6、absolute + calc7. display:table-cell实现CSS垂直居中。 1、设定行高(line-height) HTML： <div class="parent"> <span class="child">你好</span> </div>
前端秘籍，CSS垂直居中必学八式，一招一式尽显功力
weixin_34279184的博客
05-08 846
前言 设计网页的时候，除了CSS水平居中的需求外，还会经常遇到CSS垂直居中的需求，CSS垂直居中跟CSS水平居中一样都是前端设计师的基本功。 这篇教程将我以往用过的8种CSS实现垂直居中的方法总结出来，也方便日后再用到时回顾。 工具/原料 CSS3 方法/步骤 1.通过verticle-align:middle实现CSS垂直居中。 通过vertical-align:middle实现CSS垂直居...
css使元素居中的九种办法
音韵者天
03-12 4671
一、使用text-align: center;居中对于行内元素或具有inline-block属性的元素居中，比如span、img等可以使用text-align: center;来实现。/*css*/ div{ border:1px solid red; text-align: center; width: 200px; } div span{ width: 100px
CSS 元素居中的三种方式
icon_Lx的博客
09-08 180
如何让一个元素在父元素中上下居中？ 方法1.：父相自绝后，子分部向左向上移动本身宽度和高度的一半（也可以用 transform:translate(-50%,-50%)）（最常用方法） 方法二：父元素设置成弹性盒，子元素横向居中，纵向居中。 方法三：父向子绝，子元素所有定位为0，margin设置auto自适应。 ...
css中常用的水平垂直居中的方法（六种详细布局的方法）
最新发布
贫僧法号依平
01-29 1616
内联元素居中布局块级元素居中布局。
css垂直居中的几种方法
06-28
### 回答1： 实现垂直居中一直是Web前端开发中比较棘手的问题。下面介绍几种常用的CSS垂直居中的方法。 一、利用flex布局实现垂直居中 父元素设置display:flex; align-items:center; justify-content:center; 实现子元素的垂直居中。 二、利用绝对定位实现垂直居中 将子元素设置为绝对定位，通过设置top:50%; transform:translateY(-50%);实现子元素的垂直居中。 三、利用table-cell属性实现垂直居中 将父元素的display属性设置为table-cell，vertical-align属性设置为middle，实现子元素的垂直居中。 四、利用line-height属性实现垂直居中 将父元素和子元素的line-height属性设置为相同的值，并将子元素设置为display:inline-block，实现子元素的垂直居中。 综上所述，以上列举了常用的四种方法来实现CSS垂直居中，根据需要选择合适的方法来解决垂直居中问题。 ### 回答2： 在网页设计中，垂直居中是一个比较常见的需求。但是，实现垂直居中并不是一件容易的事情。在CSS中，有几种方法可以实现垂直居中，下面介绍一些常用的方法： 1.使用flexbox Flexbox是一种强大的CSS布局模式，可以很容易地实现垂直居中。通过将容器的display属性设置为flex，然后将align-items属性设置为center，就可以将内容垂直居中。 ``` .container { display: flex; align-items: center; justify-content: center; } ``` 2.使用position 在容器中使用绝对定位可以实现垂直居中。将子元素的position属性设置为absolute，并将top和bottom都设置为0，然后将margin属性设置为auto，这样就可以将内容垂直居中。 ``` .container { position: relative; } .child { position: absolute; top: 0; bottom: 0; margin: auto; } ``` 3.使用table-cell 将容器的display属性设置为table，子元素的display属性设置为table-cell，并将vertical-align属性设置为middle，就可以将内容垂直居中。 ``` .container { display: table; } .child { display: table-cell; vertical-align: middle; } ``` 4.使用transform 使用transform属性可以让内容在垂直方向上居中。将子元素的position属性设置为absolute，然后将top和left都设置为50%，再使用transform: translate(-50%, -50%)，就可以将内容垂直居中。 ``` .container { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } ``` 以上是一些常用的CSS垂直居中方法，可以根据具体需求选择合适的方法。 ### 回答3： 在网页设计中，垂直居中元素是一个非常常见的需求，而CSS也提供了多种方法实现垂直居中。下面我们来介绍一些常用的垂直居中方法。 1. 使用Flexbox布局 Flexbox是CSS3中引入的一种灵活的基于容器和项目的布局方式。我们可以通过设置容器的display属性为flex，再设置justify-content和align-items属性来实现元素的水平和垂直居中。 例如，将含有一个子元素的容器水平和垂直居中，可以将CSS代码写成这样： ``` .container { display: flex; justify-content: center; align-items: center; } .container > div { width: 200px; height: 100px; background-color: #f00; } ``` 2. 使用绝对定位和负边距 我们可以将要居中的元素使用绝对定位，然后设置top、bottom、left、right属性为0，同时使用margin:auto来实现水平居中。 例如： ``` .parent { position: relative; } .child { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 100px; background-color: #f00; } ``` 但这种方法需要在父元素中声明定位属性为relative或absolute。 3. 使用transform 我们可以使用CSS3的transform属性，将要垂直居中的元素的translateY属性设置为-50%。 例如： ``` .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: translateY(-50%); width: 200px; height: 100px; background-color: #f00; } ``` 这种方法同样需要在父元素中声明定位属性为relative或absolute。 4. 使用flex布局和auto margin Flexbox布局中使用auto margin来实现水平和垂直居中。 例如： ``` .parent { display: flex; } .child { margin: auto; width: 200px; height: 100px; background-color: #f00; } ``` 这种方法非常简单，但需要注意父元素需要设置为flex布局。 总的来说，以上这些方法都可以实现垂直居中，可以根据具体情况选择适合自己的方式。同时，我们也可以根据需求结合使用不同的方法实现垂直居中。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值