网络营销电子商务研究中心 - bootstrap 如何让div内部垂直居中？

Code:

<!DOCTYPE html>

<html lang="en">

<head>

        <meta charset="UTF-8">

        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>Bootstrap</title>

        <link rel="stylesheet" href="css/bootstrap.min.css">

        <style>

                .a {

                        height: 50px;

                        border: 1px solid #ccc;

                        background-color: #eee;

                }

                .div {

                        height: 130px;

                        background-color: #eee;

                        line-height: 9px;

                }

                #center{

                position: relative;

                top: 50%;

                -webkit-transform: translateY(-50%);

                -moz-transform:  translateY(-50%);

                -ms-transform:  translateY(-50%);

                -o-transform:  translateY(-50%);

                transform:  translateY(-50%);

                }



        </style>

</head>

<body>

        <div class="text-center div">

        <div id="center">

            <p>ddd</p>

            <p>ddd</p>

        </div>

</div>

 

        <script src="js/jquery-1.12.4.min.js"></script>

        <script src="js/bootstrap.min.js"></script>

</body>

</html>

//这段css是让div内容垂直居中;
//注意的是，在bootstrao中垂直居中的div不要包裹在.container里;

其实垂直居中方法实现有很多，这是我目前水平认知比较好的解决方案;

-------------
如是一行，设置行高等于div高度,height=line-height