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.

clipboard.png

clipboard.png

html
clipboard.png

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>
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

.
MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1e4844a-44c9c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1e4844a-44c9c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?