CSS水平垂直居中(多种方法解决)

最新推荐文章于 2023-08-02 23:06:40 发布
最新推荐文章于 2023-08-02 23:06:40 发布
阅读量156 收藏 1
点赞数 2
文章标签： css css3 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/big_wolf0/article/details/117716408
版权

1.flex

该方法时兼容手机端居中的首选

<html>
    <head>
        <style>
            .box{
                width: 500px;
                height: 500px;
                border: 1px solid red;
                display: flex;
                /* 设置弹性布局的方向 */
                flex-direction: row;
                /* 表示在主轴上对齐居中 */
                justify-content: center;
                /* 在侧轴上对齐居中 */
                align-items: center;
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: red;

            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

2.flex+margin

<html>
    <head>
        <style>
            .box{
                width: 500px;
                height: 500px;
                border: 1px solid red;
                /*  */
                display: flex;
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: red;
                /* 把margin设为自动，可以理解为子元素被四周的 margin “挤” 到了中间*/
                margin: auto;

            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

3、absolute+transform

这个方法一般用于图片的居中

<html>
    <head>
        <style>
            .box{
                width: 500px;
                height: 500px;
                border: 1px solid red;
                /*  */
                position: relative;
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: red;
                /* 设置绝对定位 */
                position: absolute;
                /* 把div定位到中间 */
                left: 50%;
                top: 50%;
                /* 由于定位的位置为该div的左上角，从而要往左往上分别移动width/2和height/2 */
                transform: translate(-50px, -50px);

            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

4、absolute + 四个方向的值相等

<html>
    <head>
        <style>
            .box{
                width: 500px;
                height: 500px;
                border: 1px solid red;
                /*  */
                position: relative;
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: red;
                /* 设置绝对定位 */
                position: absolute;
                /* margain设为自动 */
                margin: auto;
                /* 所有值都设为相同即可 */
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

5、grid 网格布局

<html>
    <head>
        <style>
            .box{
                width: 500px;
                height: 500px;
                border: 1px solid red;
                /* 设为网格布局 */
                display: grid;
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: red;
                /* 将 网格项中的内容 对齐到 网格区域 的垂直中间位置 */
                align-self: center;
                /* 将 网格项中的内容 对齐到 网格区域 的水平中间位置 */
                justify-self: center;
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
</html>

但它在兼容性上不如 flex，特别是 IE 浏览器，只支持 IE10 及以上。

6、margin+transform

<html>
    <head>
        <style>
            .box{
                width: 500px;
                height: 500px;
                border: 1px solid red;
            }
            .box>div{
                width: 100px;
                height: 100px;
                background: red;
                /* 把div定位到中间 */
                margin-left:50%;
        		margin-top:50%;
                /* 由于定位的位置为该div的左上角，从而要往左往上分别移动width/2和height/2 */
                transform: translate(-50px, -50px);
            }
        </style>
        <script>
        </script>
    </head>
    <body>
        <div class="box">
            <div></div>
        </div>
    </body>
</html>
大狼狗
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
CSS制作水平垂直居中对齐 多种方式各有千秋
09-25
在制作Web页面时都有碰到CSS制作水平垂直居中，我想大家都有研究过或者写过，平时工作收集了几种不同的方式制作垂直居中方法，但每种方法各有千秋在此与大家分享或许对初学者有所帮助
DIV以及图片水平垂直居中兼容多种浏览器
09-22
纯css完美地解决图片以及div垂直水平居中，兼容IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari具体实现css 如下，感兴趣的朋友可以参考下哈
css实现水平居中和垂直居中，清除浮动
weixin_46253682的博客
06-02 467
css
css垂直居中的6种方式
weixin_42974827的博客
09-08 1万+
这里实现了比较常用的垂直水平居中的方案，十分有用，希望对于面试必考题来说，只要熟练掌握前面三种，基本上是没有问题了，源码我会放在本人主页的资源里面，供大家免费下载，创作不易，关注一下，后续将带来vue版本大屏可视化解决方案。敬请期待吧~~~❤️。
css 居中问题的总结
qq_43889848的博客
05-15 2209
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
CSS 解决表单单行文本框中的文字垂直居中问题
牵挂著你是那颗我的心 飘呀飘地在你面前捉摸不定 牵挂著你是那份我的情 吹呀吹到你的眼前我的心 我不愿看到你那湿润的眼睛 怕我会忍不住疼你怕你伤心 我不愿听见你说寂寞的声音 怕我会忍不自你说我的真感情
01-21 1495
CSS 解决表单单行文本框中的文字垂直居中问题 示例代码： 必须同时指定height和line-height
CSS垂直居中的几种方法
m0_72838183的博客
10-04 6683
推荐大家几种常见的css垂直居中的方法，便于不同的场景使用，也方便大家面试时有更多的思路，如果大家有更好更多的方法，欢迎留言讨论
CSS 垂直居中的七种方法——史上最详细总结
热门推荐
qq_37384271的博客
10-10 2万+
我们在写页面时，通常会用到水平居中或垂直居中，而水平居中很好处理，不外乎就是设定 margin: 0 auto; 或是 text-align: center; “垂直居中”却比较麻烦，下面介绍七种纯 CSS 实现垂直居中的方式。 一、设定行高（line-height） 设定行高是垂直居中最简单的方式，适用于“单行”的“行内元素”（inline、inline-block），例如单行的标题，或是已经设为 inline-block 属性的 div，若将 line-height 设成和高度一样的数值，则内容的行内元
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垂直居中的12种实现方式
weixin_34348111的博客
01-15 367
使用绝对定位和负外边距对块级元素进行垂直居中 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多种方法实现div中单行文字、多行文字及嵌套div垂直水平居中
09-25
经常遇到要居中的问题，水平居中问题比较好解决，而垂直居中问题因为vertical-align经常失效，下面与大家分享下几个不错的解决方法
CSS实现垂直居中的十五种方法
guanguan0_0的博客
10-17 4918
情景一：单行文字垂直居中 1、line-height 原理是在于将单行文字的行高设定后，文字会位于行高的垂直中间位置 &lt;div class="text-con"&gt;单行文字垂直居中&lt;/div&gt; &lt;style&gt; .text-con { width: 200px; height:60px; line-...
CSS垂直居中的7个方法：
qq_51904231的博客
08-02 2369
使用flex布局（最优），仅需3行代码！
css 实现垂直居中的五种方法
weixin_47192515的博客
08-31 2802
css实现垂直居中的五种方法
CSS实现垂直居中的5种方法
m0_56649557的博客
08-20 1万+
第一种 position定位+margin负距离 前提是知道居中元素的宽高，首先给居中元素定位，之后设置margin的负距离为具体宽高的一半便可达到垂直居中效果 <style> .box1 { height: 300px; width: 300px; border: 10px solid pink; position: relative; } .
CSS实现垂直居中的6种办法
weixin_68258851的博客
07-18 7670
父子元素都不确定宽高的情况也适用。如果子元素的宽高确定的话，translate中的值也可以设置为子元素宽高的一半，即transformtranslate(-100px,-100px);这种方式适合子元素宽高确定的情况，给margin-top设置百分比的大小将不生效，即margin-top-50%;这种方式需要父元素的宽高都是确定的，才能保证子元素在父元素中垂直水平都居中。这种方式要求父元素的高度是确定的，百分比形式的高度将不能生效。这种方式适用于父元素高度确定的情况。父子元素宽高都未知时也适用。...
css实现垂直水平居中的六种方法
weixin_67720880的博客
04-20 5318
该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。这会使元素降低而不是升高。在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。vertical-align 属性设置一个元素的垂直对齐方式。
CSS总结div中的内容垂直居中的六种方法
susunjia的博客
07-14 4416
CSS总结div中的内容垂直居中的六种方法
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 水平垂直居中
最新发布
09-01
以上是几种常用的CSS水平垂直居中的方法。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* *2* *3* [16种CSS水平垂直居中方法]...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值