What if html doesn't fill the whole browser? there are pictures.

There is only one < div id= "- sharpapp" > < / div > element in

body, and I want him to center

body{
    display: flex;
    flex-direction: column;
    align-items: center;
}

then the center is centered, but there is a strange margin next to it.

html

The

code looks like this

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app"></div>
    <script></script>
</body>
</html>

Vue.js element-ui css html

Mar.04,2021

maybe there are sub-elements in the middle that stretch the width. Check out the

html and body that can be found to

open the page in Firefox browser, find the 3D stacked menu in the developer's tools, and you can see which element is the problem. It works all the time!

browsers will have some default styles that need to be removed, giving you a simple css reset, to load before all styles:

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box; // 
}
*, *::before, *::after{
    box-sizing: inherit;
    padding: 0;
    margin: 0;
}

you can use the following styles in html,body:

html, body {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
    overflow:hidden;
    box-sizing: border-box; // 
}

when you encounter this kind of problem, you can open the developer's tool in the browser and look at the corresponding elements to see what caused it

Previous: The understanding of Vue v-on:scroll.passive

Next: Vue-cli scaffolding project can work normally, but click on the route in the project will sometimes report an error, how to solve this?