老师，请问一下怎么让内容自适应高度然后居中呢？

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        .clearfix:after,
        .clearfix:before {
            content: " ";
            display: block;
            clear: both;
        }
        /*-------------头部设置-------------*/
        .header {
            width: 100%;
            height: 100px;
            background-color: black;
        }
        .logo img {
            width: 300px;
            height: 100px;
        }
        .top-nav {
            position: absolute;
            right: 0;
            top: 0;
        }
        .t-li {
            display: inline-block;
            line-height: 100px;
            margin: 0 30px;
            font-size: 25px;
        }
        .t-li a {
            text-decoration: none;
            color: white;
        }
        /*-------------内容部分设置-------------*/
        .content {
            width: 100%;
            height: 1000px;
            background-color: rgba(176, 216, 230, 1.00);
        }
        .left {
            float: left;
            width: 50%;
            position: relative;
        }
        .right {
            float: right;
            width: 50%;
            position: relative;
        }
        .l-contrain,
        .r-contrain {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }
        h2,
        p {
            margin: 10px;
        }
        span {
            margin-right: 20px;
        }
        .titile {
            background-color: pink;
        }
        /*-------------底部设置-------------*/
        .footer {
            background-color: black;
            width: 100%;
            height: 100px;
            text-align: center;
        }
        .f-li {
            display: inline-block;
            line-height: 100px;
            font-size: 20px;
            margin: 0 30px;
        }
        .f-li a {
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="header">
        <div class="logo"><a href="#"><img src="http://img1.sycdn.imooc.com/climg//58c0d2d900016ce303000100.png" alt="logo"></a></div>
        <div class="top-nav">
            <p class="t-li"><a href="#">课程</a></p>
            <p class="t-li"><a href="#">职业路径</a></p>
            <p class="t-li"><a href="#">实战</a></p>
            <p class="t-li"><a href="#">猿问</a></p>
            <p class="t-li"><a href="#">手记</a></p>
        </div>
    </div>
    <div class="content clearfix">
        <div class="left">
            <div class="l-contrain">
                <h2>课程推荐</h2>
                <p><span class="titile">职业路径</span><span>HTML5与CSS3实现动态网页</span></p>
                <p><span class="titile">职业路径</span><span>零基础入门Android语法与界面</span></p>
                <p><span class="titile">职业路径</span><span>iOSk基础语法与常用控件</span></p>
                <p><span class="titile">职业路径</span><span>PHP入门开发</span></p>
                <p><span class="titile">职业路径</span><span>JAVA入门开发</span></p>
            </div>
        </div>
        <div class="right">
            <div class="r-contrain">
                <h2>相关课程</h2>
                <p>
                    <span>HTML</span>
                    <span>CSS</span>
                    <span>JavaScript</span>
                </p>
                <p>
                    <span>HTML5</span>
                    <span>CSS3</span>
                    <span>Jquery</span>
                </p>
                <p>
                    <span>移动端基础</span>
                    <span>移动端APP开发</span>
                </p>
            </div>
        </div>
    </div>
    <div class="footer">
        <p class="f-li"><a href="#">网站首页</a></p>
        <p class="f-li"><a href="#">企业合作</a></p>
        <p class="f-li"><a href="#">人才招聘</a></p>
        <p class="f-li"><a href="#">联系我们</a></p>
        <p class="f-li"><a href="#">常见问题</a></p>
        <p class="f-li"><a href="#">友情链接</a></p>
    </div>
</body>
</html>

w我是想让left和right都在内容部分的正中间（水平、高度都居中），但是弄巧成拙，left、right都没高度了。怎么才能实现left和right都在内容部分的正中间呢？

超速飛 2017-06-26

源自：CSS网页布局基础 2-10 编程练习

收起

1回答

卡布琦诺 2017-06-26 12:09:49

高度自适应可以给需要设置高度的盒子设置position:absolute;然后设置left、right、top、bottom分别为0；但是目前阶段我们还没有学习响应式开发，因此建议设置固定宽高，希望可以帮到你！

收起回答

提问者超速飛 #1

我设置的就是这个但是没啥作用，检查之后发现容器高度为0，设置的居中无效

2017-06-26 15:25:03
卡布琦诺回复提问者超速飛 #2

代码没有问题，但是放错位置了，建议参考如下代码：.left { float: left; width:50%; position: absolute; top:100px; left: 0; right: 0; bottom:44px; background:red; } .right { float: right; width: 50%; position: absolute; top:100px; left:50%; right: 0; bottom:44px; background:green; } .l-contrain, .r-contrain { position:absolute; top:50%; left:33%; margin-top:-100px; }希望可以帮到你！

2017-06-26 19:16:58