css 不定宽高元素水平垂直居中

快来打我* 2022-05-11 11:06 239阅读 0赞

方法三种，可以根据实际需求选择。

方法一
    <body>
        <div id="box">
            <div id="content">山夫不解数甲子，一叶落知天下秋。</div>
        </div>        
    </body>
    html,body{
        width:100%;
    height:100%;
    }
    #box { width:100%; height:100%;position:relative;}
    #content { width:50%; height:50%;position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; }
    
    方法二 
    
    <body>
        <div id="box">
            <div id="content">吏书翻扬阅千机，一笛行吟狂九歌。</div>
        </div>        
    </body>
    html,body{
        width:100%;
    height:100%;
    }
    #box { width:100%; height:100%;position:relative;}
    #content { position:absolute;left:50%; top:50%;  
    transform:translateX(-50%) translateY(-50%); 
    -webkit-transform:translateX(-50%) translateY(-50%);
    
    方法三
    
    <body>
        <div id="box">
            <div id="content">吏书翻扬阅千机，一笛行吟狂九歌。</div>
        </div>        
    </body>
    html,body{
        width:100%;
    height:100%;
    }
    #box { display:flex; display:-webkit-flex; justify-content:center; align-items:center;}//新属性 考虑兼容性问题

发表评论取消回复

表情：

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

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

相关阅读

相关【CSS】不定高度的弹框水平垂直居中

why 对于特定的高度的弹框这个问题很好处理，计算好弹框离父元素的的高度，使用margin处理即可。但是为了通用性，不必每一次都去计算，有没有通用一点的方

秒速五厘米/ 2023年02月08日 15:52/ 0 赞/ 14 阅读

相关 [CSS]元素水平垂直居中方法

1）父元素设置display:flex; justify-content:center; align-items:center; 2）元素position:absolute

刺骨的言语ヽ痛彻心扉/ 2022年12月08日 01:58/ 0 赞/ 174 阅读

相关未知宽高元素垂直水平居中

在前端布局中，不可避免的会让元素垂直水平居中，已达到某种效果，那么这个元素按照是否知道宽高来分为已知宽高，未知宽高 1.借助table的td中的元素下面介绍的方

旧城等待，/ 2022年09月30日 13:48/ 0 赞/ 188 阅读

相关一秒入门：不定宽高的水平垂直居中简单方式

![这里写图片描述][70] <html> <meta charset="UTF-8"> <body> <di

深碍√TFBOYSˉ_/ 2022年05月26日 03:51/ 0 赞/ 172 阅读

相关 css 不定宽高元素水平垂直居中

方法三种，可以根据实际需求选择。方法一 <body> <div id="box"> <div id="

快来打我*/ 2022年05月11日 11:06/ 0 赞/ 240 阅读

相关 CSS未知宽高的元素，水平垂直居中

方法一：使用定位思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%) 优点：高大上,

男娘i/ 2022年04月13日 09:44/ 0 赞/ 239 阅读

相关未知大小（不定宽高）的子元素在父元素中水平垂直都居中

方案1：父元素：\{ position:relative; \} 子元素：\{ position:absolute; left:0; right:0;

女爷i/ 2022年04月10日 07:53/ 0 赞/ 225 阅读

相关未知图片宽高水平垂直居中

![这里写图片描述][20160328213110837] <!DOCTYPE html> <html> <head>

我就是我/ 2022年01月26日 12:05/ 0 赞/ 250 阅读

相关定宽高的div元素垂直水平居中

![1488621-20190528160226952-1274501532.png][] 关键点在于：采用绝对定位，使元素盒子左顶点位于垂直居中位置，再设置margin-l

ゝ一纸荒年。/ 2021年12月18日 07:47/ 0 赞/ 308 阅读

相关 css实现元素水平垂直居中

1.绝对定位，利用负边距利用负边距实现子元素居中(相对于父元素(position:relative))，需已知子元素的width与height；且把子元素的positi

刺骨的言语ヽ痛彻心扉/ 2021年09月18日 16:12/ 0 赞/ 434 阅读