vue-cli3：

vue create projectName

<template>

<div class="main">

<div class="left">

<!-- <Left></Left> -->

</div>

<div class="right">

<div class="top">

<!-- <img src="../../public/img/title.jpg" alt /> -->

<img src="img/title.jpg" alt />

<!-- <img src="../assets/logo.png" alt /> -->

</div>

<div class="bottom">

<!-- <Right></Right> -->

</div>

</div>

</div>

</template>

<script>

import Left from "../components/Left.vue";

import Right from "../components/Right.vue";

export default {

components: {

Left,

Right

}

};

</script>

<style scoped>

* {

padding: 0;

margin: 0;

}

.main {

width: 90%;

border: 1px solid red;

padding: 5px;

margin: 20px auto;

display: flex;

flex-direction: row;

}

.left {

border: 1px solid blue;

width: 100px;

margin-right: 10px;

/* background-color: #f5f5f5; */

}

.right {

border: 1px solid green;

flex: 1;

/* background-color: #f5f5f5; */

}

.left,

.right {

background-color: #f5f5f5;

}

.top img {

height: 200px;

width: 100%;

}

</style>

指定宽度1200，margin 水平auto 就是居中了