css3 - css垂直水平居中？-PHP中文网问答

如何实现B在A中，垂直和水平方向都居中？
代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta charset="UTF-8"/>
    <title></title>
    <style>
        #A {
            position: relative;
            width: 500px;
            height: 500px;
            background-color: green;
        }

        #B {
            position: absolute;
            max-width: 300px;
            max-height: 300px;
            background-color: blue;
        }
    </style>
</head>
<body>


<p id="A">
    <p id="B">哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥
        哥哥哥哥给哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥给哥哥哥
        哥哥哥哥给哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥给哥哥哥
        哥哥哥哥给哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥给哥哥哥
        哥哥哥哥给哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥哥给哥哥哥
    </p>
</p>


</body>
</html>

#A { position: relative; width: 500px; height: 500px; background-color: green; } #B { position: absolute; max-width: 300px; max-height: 300px; background-color: blue; /* add */ margin:auto; left:0; right:0; top:0; bottom:0; }

#A { position: relative; width: 500px; height: 500px; background-color: green; /*add*/ display: flex; display: -webkit-flex; } #B { /*position: absolute;*/ max-width: 300px; max-height: 300px; background-color: blue; /*add*/ margin: auto; }

#A { position: relative; width: 500px; height: 500px; background-color: green; } #B { width: 50%; height: 50%; margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; max-width: 300px; max-height: 300px; background-color: blue; }

全部回复(7)

阿神2017-04-17 11:08:33 7楼

两种方法：

第一种：

第二种：

赞 +0

添加回复

PHP中文网2017-04-17 11:08:33 6楼

    #A {
        display:table-cell;
        vertical-align:middle;
    }

    #B {
        /* position:absolute; */
        margin:0 auto;
    }

http://jsfiddle.net/7uakz7p1/

阿神2017-04-17 11:08:33 5楼

今天刚学到的一种比较简单的方法：父容器设置display: flex; 要居中的子元素设置margin: auto;即可。
本例中

ps. IE下好像有问题...

PHPz2017-04-17 11:08:33 4楼

天蓬老师2017-04-17 11:08:33 3楼

正好发现一个网站，给了好多解决方案 Centering in CSS: A Complete Guide

赞 +1

高洛峰2017-04-17 11:08:33 2楼

http://jsfiddle.net/nbayw7ea/

阿神2017-04-17 11:08:33 1楼

http://css-tricks.com/centering-css-complete-guide/