居中问题

作者: 月尚 | 来源:发表于2018-04-26 16:07 被阅读0次

页面布局居中问题
居中问题
居中问题
居中问题
居中问题
前端面试重点——居中问题
居中的那些事
垂直居中问题、多行居中
设置居中样式
CSS解决居中问题方案汇总

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0;
        }
        .dome1{
            width: 200px;
            height: 200px;
            background-color: red;
            /*绝对定位，脱离文档流，先对于body定位*/
            position: absolute;
            top: 50%;
            left: 50%;
            /*这是div的左上角在页面的正中心，整个div还是没有完全位于正中间*/

            /*下面的写法是还是不能达到目的*/
            /*margin-top: 50%;*/
            /*margin-left: 50%;*/
        }
    </style>
    <meta charset="UTF-8">
    <title>居中问题</title>
</head>
<body>
    <div class="dome1"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0;
        }
        .dome1{
            width: 200px;
            height: 200px;
            background-color: red;
            /*负值*/
            margin-left: -100px;
        }
        .dome2{
            width: 200px;
            height: 200px;
            background-color: orange;
            /*绝对定位*/
            position: absolute;
            /*position: fixed;*/
            left: 50%;
            top: 50%;
            /*此时左上角在文档中心*/
            /*再设置外边距负值，往回走*/
            margin-left: -100px; /*宽度的一半*/
            margin-top: -100px; /*高度的一半*/
            /*这样是在文档居中*/
            /*如果需要再可视区窗口居中，把 position 的值设置成 fixed 即可*/
        }
    </style>
    <meta charset="UTF-8">
    <title>居中问题2负值的运用</title>
</head>
<body>
    <!-- <div class="dome1"></div> -->
    <div class="dome2"></div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
</body>
</html>