2D转换结合定位来实现盒子水平和垂直居中

亦凉 2023-02-27 14:58 3阅读 0赞

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]  
源代码：

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father { 
                position: relative;
                width: 400px;
                height: 400px;
                margin: 200px auto;
                background-color: #ccc;
            }
            
            .son { 
                position: absolute;
                width: 200px;
                height: 200px;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                /*translate的百分比是相对于自身盒子的大小而言*/
                text-align: center;
                line-height: 200px;
                border-radius: 50%;
                background-color: #00a4ff;
            }
        </style>
    
        <body>
            <div class="father">
                <div class="son">
                    居中
                </div>
            </div>
        </body>
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNzY3OTQ1_size_16_color_FFFFFF_t_70]: /images/20230209/05b92d68066349b0b5188f91962e6907.png

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 盒子水平垂直居中

<div class="container"> 　　<div class="content">我是内容盒子</div> </div> 　　

向右看齐/ 2023年08月17日 15:40/ 0 赞/ 179 阅读

相关 CSS 面试题——盒子水平垂直居中

CSS 面试题——盒子水平垂直居中方法一：通过定位(三种方法) 1、已知盒子宽高 html,body{ margin: 0;

迷南。/ 2023年07月04日 12:50/ 0 赞/ 71 阅读

相关 2D转换结合定位来实现盒子水平和垂直居中

效果如下： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nL

亦凉/ 2023年02月27日 14:58/ 0 赞/ 4 阅读

相关面试题：CSS盒子水平居中、垂直居中、水平垂直居中

目录 1. 实现盒子水平垂直居中方法一：定位（1）方法二：定位（2）

比眉伴天荒/ 2023年02月26日 11:28/ 0 赞/ 147 阅读

相关绝对定位水平垂直居中

1.绝对定位水平垂直居中 <style> .box { position: absolute;

你的名字/ 2023年02月13日 14:57/ 0 赞/ 221 阅读

相关（css）盒子水平、垂直居中方法

利用定位和margin： 1、给要居中盒子的父盒子设置相对定位 2、给要居中的盒子设置固定定位 3、水平left、垂直top都设置为50% 4、利用margin，m

桃扇骨/ 2022年10月31日 13:35/ 0 赞/ 301 阅读

相关 css中让绝对定位的盒子水平或者垂直居中！！

这是一个标准流盒子，代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta chars

深碍√TFBOYSˉ_/ 2022年10月24日 13:15/ 0 赞/ 191 阅读

相关 css 通过绝对定位实现水平垂直居中

知识点： margin: auto; 效果图： ![70][] 代码： html: <div class="outer"> <div

r囧r小猫/ 2022年05月13日 11:40/ 0 赞/ 326 阅读

相关水平居中和垂直居中

水平居中若元素为inline元素比如`a,b,strong,i,span,img,input,select`等，为父元素设置`text-align: cent

约定不等于承诺〃/ 2022年01月18日 23:11/ 0 赞/ 483 阅读

相关水平居中和垂直居中

1.水平居中 (1) 文本、图片等行内元素的水平居中　　给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中。 (2) 确定宽度的块级元

た入场券/ 2021年11月23日 08:08/ 0 赞/ 529 阅读