问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

css垂直居中的问题

头像
yaxin
    1.5k184852

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

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

    尽量不用js

    html5htmlcss
    阅读 22.4k
    12 个回答
    得票最新
    头像
    神飞
      53
      ✓ 已被采纳
      头像
      mage3k
        546259

        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;
}

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

        头像
        kmxz
          4.3k21525

          1、table-cell方法，ls有讲

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

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

          头像
          sapjax
            286112

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

            头像
            衡锋
              145112
              头像
              Theo
                2.6k124

                好像看见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>
                头像
                Cisy
                  62133

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

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

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

                  头像
                  Andy
                    485214
                    头像
                    xuyiwei
                      411
                      新手上路，请多包涵
                      <!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>
<div id="floater"> </div>
<p>垂直居中</p>
</body>
</html>
                      头像
                      CoffeeXu
                        1
                        新手上路，请多包涵

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

                        头像
                        iamxz
                          173257

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

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

    <div></div>
</body>
</html>
                          撰写回答
                          你尚未登录，登录后可以
                          • 和开发者交流问题的细节
                          • 关注并接收问题和回答的更新提醒
                          • 参与内容的编辑和改进，让解决方法与时俱进
                          被 1 篇内容引用
                          推荐问题
                          宣传栏