CSS实现元素水平居中总结

作者: 焦糖大瓜子 | 来源:发表于2019-05-19 17:31 被阅读0次

css 水平垂直居中实现方式
垂直居中，水平居中
CSS实现元素水平居中总结
CSS居中小结
CSS居中的方法总结
CSS布局(不完全)总结
实现水平/垂直居中
CSS使用技巧--实现元素（水平、垂直）居中
margin负值应用实例
CSS系列篇：居中的实现以及使用场景

1 对行内元素，设置text-align: ceter;
2 块级元素：
a. 转化为行内元素，display: inline-block;父元素设置text-align: center
b. 定宽：父子元素都是定宽，子元素设置了margin: 0 auto;
c. 使用绝对定位，有几种实现方式

flex布局

<!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>
        .parent{
            background-color: beige;
        }
        .son{
            background-color:burlywood;
        }

        /* 方案1: 定宽，使用margin: 0 auto*/
        /* .parent{
            width: 600px;
            height: 400px;
        }
        .son{
            width: 300px;
            height: 200px;
            margin: 0 auto;
        } */

          /* 方案2: 定宽，使用margin: 0 auto*/
        /* .parent{
           text-align: center;
        }
        .son{
            display: inline-block;
        } */

        /* 方案3: 绝对定位*/
         /* .parent{
            position: relative;
        }
        .son{
            width: 600px; 
            position: absolute; 
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }   */

         /* 方案4: flex布局*/
         /* .parent{
            display: flex;
            justify-content: center;
        } */
    </style>
</head>
<body>
    <div class="parent">
        <div class="son">2134</div>
    </div>
    <div>这里有一行文字，这里有一行文字</div>
</body>
</html>