찾다

 >  Q&A  >  본문

html - css垂直居中的问题

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

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

尽量不用js

黄舟黄舟2796일 전1108

모든 응답(12)나는 대답할 것이다

  • ringa_lee

    ringa_lee2017-04-17 11:03:25

    Tivon的方案不错,改进一下:

    https://gist.github.com/4326240

    呃,有没有办法直接嵌入gist的?

    회신하다
    0
  • 黄舟

    黄舟2017-04-17 11:03:25

    HTML:

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

    CSS:

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

    http://jsfiddle.net/dGyuC/2/
    不用js的话我只能想到这个了。

    회신하다
    0
  • 黄舟

    黄舟2017-04-17 11:03:25

    1、table-cell方法,ls有讲

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

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

    회신하다
    0
  • ringa_lee

    ringa_lee2017-04-17 11:03:25

    <p><center >垂直居中</center></p>

    회신하다
    0
  • 迷茫

    迷茫2017-04-17 11:03:25

    好像看见kejun在微博上提过这种写法,用button标签,里面的内容默认就是水平垂直居中的,当然需要定义button样式。

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>使用button垂直水平居中</title>
    <style type="text/css">
    html,body,button{width: 100%;height: 100%;margin: 0;padding: 0;}
    </style>
    </head>
    <body>
    <button><p>wording</p></button>
    </body>
    </html>

    회신하다
    0
  • 高洛峰

    高洛峰2017-04-17 11:03:25

    除了上述的方法,还可以试试flexbox布局模式(Chrome当前版本仍然需要添加前缀“-webkit-”)

    html, body {
        display: -webkit-flex;
        display: flex;
        width: 100%;
        height: 100%;
    }
    p {
        margin: auto;
    }
    

    不过该规范最近才达到稳定,在主要的浏览器对新的版本有相当完整的支持,但有些浏览器对它的实现也许并不相同。

    회신하다
    0
  • 迷茫

    迷茫2017-04-17 11:03:25

    看这里,通用方案。
    https://github.com/sofish/Alice/blob/...

    회신하다
    0
  • PHPz

    PHPz2017-04-17 11:03:25

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>无标题文档</title>
    <style>
    html, body {
    	height:100%;
    	padding:0;
    	margin:0
    }
    #floater {
    	height:50%;
    	margin-bottom:-150px;
    	position:relative;
    }
    p {
    	background:#933;
    	height:300px;
    	position:relative;
    }
    </style>
    </head>
    
    <body>
    <p id="floater"> </p>
    <p>垂直居中</p>
    </body>
    </html>

    회신하다
    0
  • PHP中文网

    PHP中文网2017-04-17 11:03:25

    忍不住想来回答下。对于不固定宽高的元素要居中的方法:父类p设置text-align:center.该需要居中的元素设置display:inline-block

    회신하다
    0
  • 迷茫

    迷茫2017-04-17 11:03:25

    来个不一样的,去360面试的时候没答出来,被鄙视了,现在写个正确的

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
    </head>
    <style>
        p {width:200px;height: 200px;background-color: red; position: absolute;left: 0;top: 0;right:0 ;bottom: 0;margin: auto;}
    </style>
    <body>
    
        <p></p>
    </body>
    </html>
    

    회신하다
    0
  • 취소회신하다