css居中

作者: 西兰花伟大炮 | 来源:发表于2017-09-16 23:24 被阅读7次

垂直居中的方法
CSS图片居中(水平居中和垂直居中)
CSS居中完全指南——构建CSS居中决策树
前端秘籍，CSS垂直居中必学八式，一招一式尽显功力
垂直居中，水平居中
CSS居中小结
居中问题
css 图片居中
CSS display: table-cell 用于水平垂直居中
多行文本固定高度垂直居中

（1）莫名其妙的居中

<style>
        #outer{
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            position: relative;
            margin: 100px auto;
        }
        #inner{
            width: 50%;
            height: 50%;
            background-color: #2e0088;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            position: absolute;
            margin: auto;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>

（2）absolute+translate

 <style>
        #outer{
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            position: relative;
            margin: 100px auto;
        }
        #inner{
            width: 50%;
            height: 50%;
            background-color: #2e0088;
            left: 50%;
            top: 50%;
            transform: translate(-100px,-100px);
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="outer">
        <div id="inner"></div>
    </div>
</body>

css居中.PNG

（1）百度前端技术学院css居中

<!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>
    <style>
    .box{
        width: 400px;
        height: 200px;
        background-color: #ccc;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-top: -100px;
        margin-left: -200px;
        overflow: hidden;
    }
    .box div{
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: #fc0;
        border-radius: 50%;
    }
    .box .left{
        left: -50px;
        top: -50px;
    }
    .box .right{
        right: -50px;
        bottom: -50px;
    }
    </style>
</head>
<body>
    <div class="box">
        <div class="left"></div>
        <div class="right"></div>        
    </div>
</body>
</html>

image.png

最佳实践

* {
    margin: 0;
    padding: 0;
}
.main {
    position: absolute;
    width: 400px;
    height: 200px;
    background-color: #ccc;
    top: 50%;
    margin-top: -100px;
    left: 50%;
    margin-left: -200px;
}
.left-top-area {
    width: 50px;
    height: 50px;
    border-radius: 0 0 50px 0;
    position: absolute;
    background-color: #FC0;
}
.right-bottom-area {
    width: 50px;
    height: 50px;
    border-radius: 50px 0 0 0;
    position: absolute;
    background-color: #FC0;
    right: 0;
    bottom: 0;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>task-04</title>
    <link rel="stylesheet" href="styles/main.css">
</head>
<body>
    <div class="main">
        <div class="left-top-area"></div>
        <div class="right-bottom-area"></div>
    </div>  
</body>
</html>