元素垂直水平居中的10中方法,建议收藏

最新推荐文章于 2023-08-12 22:49:16 发布
最新推荐文章于 2023-08-12 22:49:16 发布
阅读量654 收藏 1
点赞数 1
文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_47222576/article/details/108504435
版权

**第一种：**通过绝对定位的方式 absolute + 负margin

​ 首先知道子元素的宽高，给子元素设置top：50%；left：50%，

但绝对定位是基于子元素的左上角，我们所希望的效果是子元素的中心居中显示。。。。借助外边距的负值，负的外边距可以让元素向相反方向定位，

​ 通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了

/*css*/
   .wp {
            border: 1px solid red;
            width: 300px;
            height: 300px;
        }

        .box {
            background: green;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }

        /* 定位代码 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            margin-left: -50px;
            margin-top: -50px;
        }

<!-- 1.absolute + 负margin -->
    <div class="wp">
        <div class="box size">123123</div>
    </div>


    <!-- 绝对定位的百分比是相对于父元素的宽高，通过这个特性可以让子元素的居中显示，
        但绝对定位是基于子元素的左上角，期望的效果是子元素的中心居中显示
        为了修正这个问题，可以借助外边距的负值，负的外边距可以让元素向相反方向定位，
        通过指定子元素的外边距为子元素宽度一半的负值，就可以让子元素居中了！！
        这是我比较常用的方式，这种方式比较好理解，兼容性也很好，缺点是需要知道子元素的宽高 -->

**优点：**比较好理解，兼容性好

**缺点：**需要知道子元素的宽高

**第二种：**也是通过绝对定位的方式 absolute + margin auto

​ 这个是需要将各个方向的距离都设0，再讲margin设为auto；就行

/*css*/
        .wp {
            border: 1px solid yellow;
            width: 300px;
            height: 300px;
        }

        .box {
            background: #ddd;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }
        /* 定位代码 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

 <!--2.absolute + margin auto -->
    <div class="wp">
        <div class="box size">66666</div>
    </div>

    <!-- 这种方式通过设置各个方向的距离都是0，此时再讲margin设为auto，就可以在各个方向上居中了

    这种方法兼容性也很好，缺点是需要知道子元素的宽高 -->

    <!-- 通过设置top，left四属性为0居中元素的做法有个前置条件，就是需要居中的盒子必须有固定的宽高(px)，否则会失效。这就像四个方向有相同的力
        在拉这个盒子，配上margin:auto让这个盒子的位置保持中立，来达到盒子处于正中心的目的。 -->
</body>

**优点：**兼容性也很好

**缺点：**需要知道子元素的宽高

**第三种：**absolute + calc（计算）

这种方法top的百分比是基于元素的左上角，那么在减去宽度与高度的一半就好了

/*css*/
.wp {
            border: 1px dotted blue;
            width: 300px;
            height: 300px;
        }

        .box {
            background: salmon;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }

        /* 定位代码 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: calc(50% - 50px);
            left: calc(50% - 50px);
        }

   <!--3.absolute + calc（计算） -->
    <div class="wp">
        <div class="box size">66666</div>
    </div>

    <!-- top的百分比是基于元素的左上角，那么在减去宽度的一半就好了

    这种方法兼容性依赖calc的兼容性，缺点是需要知道子元素的宽高 -->

    <!-- 任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
它支持 “+”, “-”, “*”, “/” 运算 -->

calc:任何长度值都可以使用calc()函数进行计算；
calc()函数使用标准的数学运算优先级规则；
它支持 “+”, “-”, “*”, “/” 运算

也可以查看calc教程：https://www.runoob.com/cssref/func-calc.html

**优点：**他的兼容性依赖的是calc的兼容性

**缺点：**同样是需要知道子元素的宽高

**第四种：**absolute + transform （过渡）

这个方法不需要子元素固定宽高

修复绝对定位的问题，还可以使用css3新增的transform，transform的translate

属性也可以设置百分比，其是相对于自身的宽和高，所以可以将translate设置为-50%，就可以做到居中了

   .wp {
            border: 1px dotted purple;
            width: 300px;
            height: 300px;
        }

        .box {
            background: darkseagreen;
        }

        .box.size {
            width: 100px;
            height: 100px;
        }
        /* 内容部分 */
        .wp {
            position: relative;
        }

        .box {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

  <!--4. absolute + transform -->
    <div class="wp">
        <div class="box size">888888888</div>
    </div>

    <!-- 还是绝对定位，但这个方法不需要子元素固定宽高
    修复绝对定位的问题，还可以使用css3新增的transform，transform的translate
    属性也可以设置百分比，其是相对于自身的宽和高，所以可以讲translate设置为-50%，就可以做到居中了 -->

**优点：**代码量少

**缺点：**IE8不支持, 属性需要追加浏览器厂商前缀, 可能干扰其他 transform 效果, 某些情形下会出现文本或元素边界渲染模糊的现象.

**第五种：**line-height

只对文本有效果，对定宽高的div是没有用的。所以在文本水平垂直居中时使用。

    div {
            height: 100px;
            width: 200px;
            background-color: pink;
            text-align: center;
        }

        span {
            display: inline-block;
            vertical-align: middle;
            /* line-height: 20px; */
            width: 100px;
        }

        i {
            display: inline-block;
            height: 100%;
            vertical-align: middle;
        }

    <!--5.lineheight -->
    <!-- <div class="wp">
        <div class="box">666666</div>
    </div> -->
    <!-- 利用行内元素居中属性也可以做到水平垂直居中
    把box设置为行内元素，通过text-align就可以做到水平居中，
    但很多同学可能不知道通过通过vertical-align也可以在垂直方向做到居中
    这种方法需要在子元素中将文字显示重置为想要的效果 -->

    <div>
        <i></i><span>我是特别长的特别长的特别长的特别长的多行文字</span>
    </div>

优点：代码简洁`

缺点：只对文本有效，只对单行文本有效，多行文本不可以

**第六种：**writing-mode

	  .wp {
            /* 将文本有水平转垂直方向*/
            writing-mode: vertical-lr;
            text-align: center;
        }

        /*
        writing-mode: horizontal-tb | vertical-rl | vertical-lr | sideways-rl | sideways-lr
        horizontal-tb：水平方向自上而下的书写方式。即 left-right-top-bottom
        vertical-rl：垂直方向自右而左的书写方式。即 top-bottom-right-left
        vertical-lr：垂直方向内内容从上到下，水平方向从左到右
        sideways-rl：内容垂直方向从上到下排列
        sideways-lr：内容垂直方向从下到上排列
        
        */
        .wp-inner {
            /*水平方向自上而下*/
            writing-mode: horizontal-tb;
            display: inline-block;
            text-align: center;
            width: 100%;
        }

        .box {
            display: inline-block;
            /* margin: auto; */
            /* text-align: left; */
        }

<!-- 6.writing-moden -->
    <div class="wp">
        <div class="wp-inner">
            <div class="box">123123</div>
        </div>
    </div>

    <!-- 这种方法实现起来和理解起来都稍微有些复杂 -->

可以参考：https://www.runoob.com/cssref/css-pr-writing-mode.html

这种方法稍微有些复杂，writing-mode可以改变文字的显示方向

**第七种：**table 形式

通过table单元格的形式设

       .wp {
            text-align: center;
        }

        .box {
            display: inline-block;
        }

    <!-- 7..table -->
    <table>
        <tbody>
            <tr>
                <td class="wp">
                    <div class="box">123123</div>
                </td>
            </tr>
        </tbody>
    </table>


        <!-- tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了
        这种方法就是代码太冗余，而且也不是table的正确用法 -->

**优点：**tabel单元格中的内容天然就是垂直居中的，只要添加一个水平居中属性就好了

**缺点：**这个不是table的正确方法，不是很建议使用，但是也是可以实现的

**第八种：**table-cell实现水平垂直居中: table-cell middle center组合使用

​ 直接给父级设

 .wp {
            width: 240px;
            height: 180px;
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #ddd;
           
        }

为了可以明显看出，我们可以给它设个宽高与边框

<!--8.css-table -->
    <div class="wp">
        <div class="box size">9999</div>
    </div>

    <!-- css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中
    这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错 -->xxxxxxxxxx    width: 240px;   height: 180px;<!--8.css-table -->    <div class="wp">        <div class="box size">9999</div>    </div>    <!-- css新增的table属性，可以让我们把普通元素，变为table元素的现实效果，通过这个特性也可以实现水平垂直居中    这种方法和table一样的原理，但却没有那么多冗余代码，兼容性也还不错 -->   border:1px solid #666;

**第九种：**弹性盒子的方式

​ 通过给父元素设置justify-content: center;

​ align-items: center;就可以了

  .wp {
            display: flex;
            justify-content: center;
            align-items: center;
        }

<!-- 9.flex -->
    <div class="wp">
        <div class="box size">22222</div>
    </div>

    <!-- 目前在移动端已经完全可以使用flex了，PC端需要看自己业务的兼容性情况 -->

**优点：**移动端使用灵活自如

**缺点：**pc端需要根据兼容情况来判定

**第十种：**grid（网格布局）

​ 给父级设display:grid;

​ 给子元素设align-self: center;justify-self: center;

   .wp {
            display: grid;
        }

        .box {
            align-self: center;
            justify-self: center;
        }

   <!-- 10.grid -->
    <div class="wp">
        <div class="box size">66666</div>
    </div>

    <!-- css新出的网格布局，由于兼容性不太好，一直没太关注，通过grid也可以实现水平垂直居中 
        代码量也很少，但兼容性不如flex，不推荐使用
    -->

**优点：**代码量少

**缺点：**兼容不如flex，建议用flex

​

多晴丶
关注
水平垂直居中一个元素（五种方法）
艾欢欢的博客
03-15 803
如何水平垂直居中一个元素 第一种：使用定位（已知本身元素宽高） /*子元素*/ .div1{ width: 400px; height:400px; background-color: red; position: absolute; top: calc(50% - 200px); left: calc(50% - 200px); } 第二种：使用...
6-2、选择器
鸵鸟
09-06 1015
选择器
各种元素水平垂直居中
no_best_only_better的博客
11-08 1835
在我们进行网站布局的时候，总是遇到让已知宽高元素和为止宽高元素水平垂直居中，下面就这问题我总结的几种方法
关于元素水平垂直居中的那些事？
懂点君
01-25 1007
中国式的美，总是少不了对称美的存在。对称美，存在于建筑之上，也巧秀于美食之中。对称之美，中国之风！美，用户体验的一种，作为用户体验的打造者，我们是不是也应该知道些有关于前端开发中的对称美呢？那我们大前端中到底存在些什么对称美呢？ok，那我们今天就来聊聊，关于元素水平垂直居中的那些事吧！
让元素水平垂直居中的四种方法
热门推荐
杏子
06-12 2万+
让元素水平垂直居中的3种方法前言一、使用弹性布局二、使用 transform三、使用绝对定位四、总结 前言 让元素水平居中有很多方法，比如设置 text-align:center；比如设置margin:auto再比如使用弹性布局，display:flex，justify-content:center。但是让元素垂直居中，或者是水平垂直居中却不是那么容易，今天就给大家分享一下3种让元素水平垂直居中的...
块级元素的三种垂直水平居中的方法
12-29
直奔主题在这里提供三种块级元素垂直水平居中的方法 flex（子级宽高可固定也可不固定，随意） 定位+margin（固定子级的宽高，margin-top,margin-left取自身一半的负值） 定位+transform（不固定子级的宽高） flex...
元素水平垂直居中的几种方法
01-20
首先，我们来看第一种方法，通过`margin: auto`实现水平居中，但这种方法无法实现垂直居中。示例代码如下： ```css #box1 { width: 300px; height: 300px; border: 1px black solid; } #box2 { width: 100px; ...
纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示
01-19
下文以span元素为例子，介绍一下如何实现span元素在div中实现水平垂直居中效果，代码如下: <!DOCTYPE html> <html> <head> <meta charset= utf-8> <meta name=author content=...
html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
01-19
html元素 水平居中 于 其父级元素的方法： 方法1： 复制代码代码如下: ”wrap”> ”left-right-middle1″>左右居中方法1</div> </div> 复制代码代码如下: html,body,div{ margin:0; padding:0; height:100%; ...
javascript实现在指定元素中垂直水平居中
11-25
在网页设计中，元素的垂直水平居中是一个常见的需求，特别是在动态布局或者响应式设计中。本节将探讨如何使用JavaScript结合CSS实现未知宽高元素在指定容器中的垂直水平居中效果。 首先，我们来看一个具体的例子，...
css设置元素水平垂直居中的方法
yhbsww0523的博客
11-27 3543
看到标题，相信大家并不陌生。这个问题，经常会出现在面试题中。通常会要求面试者写出几种方法。 那么，究竟有几种方法，每种方法的兼容情况如何，相信大家很少研究过。今天，我们就一起来看看。 通常分为2中情况，已知元素的宽度或未知。 我们先说说在已知的情况下，要如何设置。 css设置元素水平垂直居中显示
设置元素垂直水平居中
foradmin的博客
02-25 224
// 垂直居中的几种方式 // 1.元素的宽高已知，可以用绝对定位，top/left设为（50%-高/宽的一半）实现 .main { position： absolute; top: calc(50% - 3em); left: calc(50% - 9em); width: 18em; height: 6em; } // 2.宽高未知，利用绝对定位以及t...
【CSS】一文掌握元素水平垂直居中
最新发布
weixin_50863323的博客
08-12 1763
实现元素水平垂直居中有以下七种方法： 利用定位+margin:auto——子绝父相，设置top、left、right、bottom为0,在设置margin:auto 利用定位+margin:负值——子绝父相，设置left和top为50%，此时位置会偏右自身元素的宽高，再设margin-left和margin-top为自身元素宽高的负一半，实现水平垂直居中。 利用定位+transform——子绝父相，设置left和top为50%，此时位置会偏右自身元素的宽高，再设transform: translateX(
元素水平垂直居中
_ACME_的博客
06-09 506
1.利用margin属性 margin是外边距属性，可以通过它来调整元素的位置margin:25% auto;如图: 好处：简单，而且随着浏览器的大小变化，位置也会跟着变，但看起来总是居中的 坏处：因为设置了margin属性，所以其它元素跟它的距离就会很大。 2.利用left，top加上margin来居住position: absolute; left: 50%; top: 50%;
元素的水平垂直居中
进无止进
03-03 640
1.行内元素水平居中 a.将行内元素包裹在块级元素中，然后设置：text-align:center.box1 { background: #2b2b2b; margin: 0 auto; width: 100px; color: white; text-align: center; } 2.块级元素水平居中 块级元素的宽度一定，这就是我们平常所用
CSS居中
weixin_34187862的博客
12-21 187
[TOC]备份及更新 说明 .center表示要被居中的元素，.wrap 表示要居中的元素的父元素（包含.center元素的元素）。 为了便于理解和叙述同一： 对于文本内容居中的情况，.wrap就是指包含文字的元素（例如<i>文字</i> ，i标签就是.wrap ）。文本内容会在外部创建一个行框（line-...
元素水平垂直居中的方法
JJ_Smilewang的博客
04-21 4894
我们在制作页面的时候，经常需要把元素进行水平垂直居中，所以今天主要介绍行内元素和块级元素水平垂直居中的多种方法，供大家选择运用。 1.行内元素水平垂直居中的方法 1.1 水平居中 text-align:center; /* 实现行内元素水平居中 */ 1.2 垂直居中 1.2.1单行文本的垂直居中 只需要让元素高度和行高相等即可； <style> div { height: 50px; width: 300px;
HTML元素水平垂直居中实践与技巧
本文将深入探讨HTML元素在页面布局中如何实现水平和垂直居中对齐，主要关注两种常见的方法：CSS绝对定位和结合CSS与JavaScript或jQuery的解决方案。 首先，让我们从CSS绝对定位的角度来理解。在HTML中，我们可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值