父级

Question

好的，我已经看到很多答案，但我仍然无法正确理解。 我有这个绿色列，其中有2个较小的列： 我需要将黄色列放在中间位置。 像这样： 我尝试了多种方法，但都没有用。当然margin-top工作，但移动屏幕不行。我知道那里有一个简单的解决方案。

这是HTML：

<div class="container-fluid bg-success" style="margin-bottom: 50px; margin-top: 50px;">
<div class="container"> 
    <div class="row">
        <div class="col-lg-12"> 

            <!-- LEFT SIDE - Easy Cafe -->
            <div class="col-lg-7 bg-warning">
            <center class="jumbotextstyle">
                <div style="font-size: 100px;"> Easy Cafe <br> </div>
                <hr width="50%" style="border: 1px solid black; margin: 10px;">
                Makes ordering easier
            </center>
            </div>

            <!-- RIGHT SIDE - Picture-->
            <div class="col-lg-5 bg-danger">
            <center>
                <img src="images/s8.png" class="img-responsive" alt="mobilepicnotworking">
            </center> 
            </div>

        </div>
    </div>
</div>

CSS：

.jumbotextstyle{
    font-size: 250%;
}

Answer 1

为您的父级div（Green Div）提供css属性显示：Flex 和 align-items：center 。

这会将你的div水平和垂直放在中心。

Example on JSFiddle

HTML CODE：

<div id="container"><!-- flex container -->

<div class="box" id="bluebox"><!-- flex item -->
    <p>DIV #1</p>
</div>

<div class="box" id="redbox"><!-- flex item -->
    <p>DIV #2</p>
</div>

CSS代码：

#container {
    display: flex; /* establish flex container */
    flex-direction: row; /* make main axis horizontal (default value) */
    justify-content: center; /* center items horizontally, in this case */
    align-items: center; /* center items vertically, in this case */
    height: 300px; /* for demo purposes */
    border: 1px solid black; /* for demo purposes */
    background-color: #eee; /* for demo purposes */
}

.box {
    width: 300px;
    margin: 5px;
    text-align: center;
}

#bluebox { background: aqua; }
#redbox { background: red; }