두 div를 서로 나란히 세로 및 가로로 정렬하는 방법

Question

페이지 위쪽의 가운데에 가로 및 세로 가운데에 두 개의 div가 있지만 다양한 유형의 "세로 정렬"& "margin : auto 0" .. 제가 적어도 노력하고있어 누군가가 내가 미리 감사하십시오 잘못 여기거야 위치에 대한 몇 가지 빛을 주시겠습니까 위해 간단하게 (작동하지 않는 명령

HTML :!

<div class="wrapper"> 

    <div id="find-us" class="col-md-5"> 
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Our Office</h5> 
    Our office is located in the heart of Seven Sisters; an up and coming area in North London. Seven Sisters has had a lot of improvement in recent years with the Central & European investments into the area.<br> 
    Seven Sisters have an excellent transport links. Commuters have the options of Victoria line to West End or British rail to Liverpool Street.<br><br> 

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Contact</h5> 
    Telephone: 020 8211 0005<br> 
    Email: enquiries@abbapropertyservices.co.uk<br> 
    Address: ABBA Property Services, 88 West Green Road, London N15 5NS<br><br> 

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Transport</h5> 
    Tube/Train: Seven Sisters Underground Station, Seven Sisters Railway Station, South Tottenham Railway Station<br> 
    Bus: 41, N41<br><br> 

    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Opening Hours</h5> 
    Monday: 9am - 5pm<br> 
    Tuesday: 9am - 5pm<br> 
    Wednesay: 9am - 5pm<br> 
    Thursday: 9am - 5pm<br> 
    Friday: 9am - 5pm<br> 
    Saturday: 10am - 1pm<br> 
    Sunday: Closed<br> 
    </div> 

    <div id="find-photo" class="col-md-5"> 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.0948652696484!2d-0.07885818431106212!3d51.584824712860375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761c1135485d4b%3A0x487d1b5ae3bd4621!2s88+W+Green+Rd%2C+London+N15+5NS!5e0!3m2!1sen!2suk!4v1491925605605" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
    </div> 

</div> 

C SS :

#wrapper { 
    vertical-align: bottom; 
} 
#find-us { 
    margin: 0 auto; 
    padding: 15px; 
    border: 1px solid pink; 
    font-size: 12px; 
} 
.col-centered{ 
    float: none; 
    margin: 0 auto; 
} 
#find-photo { 
    height: 100%; 
} 
#contact-form { 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
    margin-left: 30%; 
    margin-top: 50px; 
    text-align: center; 
    border: 1px solid black; 
} 

Answer 1

display: flex; align-items: center; justify-content: center; 플렉스 상자에 대한 .wrapper

.wrapper { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
#find-us { 
 
    padding: 15px; 
 
    border: 1px solid pink; 
 
    font-size: 12px; 
 
} 
 
.col-centered{ 
 
    float: none; 
 
    margin: 0 auto; 
 
} 
 
#find-photo { 
 
    height: 100%; 
 
} 
 
#contact-form { 
 
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; 
 
    text-align: center; 
 
    border: 1px solid black; 
 
}

<div class="wrapper"> 
 

 
    <div id="find-us" class="col-md-5"> 
 
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Our Office</h5> Our office is located in the heart of Seven Sisters; an up and coming area in North London. Seven Sisters has had a lot of improvement in recent years with the Central & European investments into the area.<br> Seven Sisters have an excellent transport 
 
    links. Commuters have the options of Victoria line to West End or British rail to Liverpool Street.<br><br> 
 

 
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Contact</h5> Telephone: 020 8211 0005<br> Email: enquiries@abbapropertyservices.co.uk<br> Address: ABBA Property Services, 88 West Green Road, London N15 5NS<br><br> 
 

 
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Transport</h5> Tube/Train: Seven Sisters Underground Station, Seven Sisters Railway Station, South Tottenham Railway Station<br> Bus: 41, N41<br><br> 
 

 
    <h5 style="color:#205ba0; margin-bottom:0px; font-weight:bold; font-size:12px;">Opening Hours</h5> Monday: 9am - 5pm<br> Tuesday: 9am - 5pm<br> Wednesay: 9am - 5pm<br> Thursday: 9am - 5pm<br> Friday: 9am - 5pm<br> Saturday: 10am - 1pm<br> Sunday: Closed<br> 
 
    </div> 
 

 
    <div id="find-photo" class="col-md-5"> 
 
    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2479.0948652696484!2d-0.07885818431106212!3d51.584824712860375!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48761c1135485d4b%3A0x487d1b5ae3bd4621!2s88+W+Green+Rd%2C+London+N15+5NS!5e0!3m2!1sen!2suk!4v1491925605605" 
 
     width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> 
 
    </div> 
 

 
</div>