为了账号安全,请及时绑定邮箱和手机立即绑定

在不给p标签任何高度和宽度的前提下,如何使“垂直居中”这几个文字显示在屏幕的正中央?

在不给p标签任何高度和宽度的前提下,如何使“垂直居中”这几个文字显示在屏幕的正中央?

慕森王 2023-04-19 17:13:52
尽量不用js<!DOCTYPE HTML><html lang="en-US"><head> <meta charset="UTF-8"> <title></title></head><body> <p>垂直居中</p></body></html>
查看完整描述

3 回答

?
料青山看我应如是

TA贡献1772条经验 获得超8个赞

HTML:

<!DOCTYPE HTML><html lang="en-US"><head>
        <meta charset="UTF-8">
        <title></title></head><body>
    <div id="c">    
        <p>垂直居中</p>
    </div></body></html>

CSS:

#c {    display:table;    height:400px;
}#c p {    display: table-cell;    vertical-align: middle;
}


查看完整回答
反对 回复 2023-04-21
?
紫衣仙女

TA贡献1839条经验 获得超15个赞

1、table-cell方法,ls有讲

2、如果知道子元素高度的话,可以有另一种好点的办法。假设子元素高度是100px。可以把父元素设为position: relative;然后父元素和子元素中间加一层position: absolute; top: 50%的div;最后最里面的子元素position: relative; top: -50px;

3、如果不用担心浏览器兼容性的话,可以用CSS transform(但是IE6-8不支持)。类似方法二,但是不需要知道元素高度。子元素最后向上平移(translate) 50%即可。


查看完整回答
反对 回复 2023-04-21
?
幕布斯7119047

TA贡献1794条经验 获得超8个赞

对于不固定宽高的元素要居中的方法:父类div设置text-align:center.该需要居中的元素设置display:inline-block

查看完整回答
反对 回复 2023-04-21
  • 3 回答
  • 0 关注
  • 271 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信