css 居中

作者: 肥羊猪 | 来源:发表于2021-01-07 14:20 被阅读0次

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

常用的居中布局.png

图片文字同行居中

vertical-align:middle;// 加载img上面

水平居中

行内元素: text-align: center
块级元素: margin: 0 auto
position:absolute +left:50%+ transform:translateX(-50%)
display:flex + justify-content: center

垂直居中

设置line-height 等于height
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;

块元素垂直居中问题采用 flex 解决。
还有完美居中 父元素display:flex 子元素们 margin:auto
行内元素垂直居中问题解决如下：单行 该元素 css 属性 line-height 的值与该元素的父级元素 css 属性 height 一致即可。
多行 设置该元素 css 属性：display: table-cell; vertical-align: middle;，还需设置该元素的父级元素 css 属性：display: table;。

    .width_center {
            border: 1px solid forestgreen;
            width: 200px;
            margin: 0 auto;
        }
        
        .nowidth_center1 {
            border: 1px solid darkgoldenrod;
            display: table;
            margin: 0 auto;
        }
        
        .nowidth_center2 {
            display: flex;
            justify-content: center;
        }
        
        .chuizhi_center {
            display: table;
            border: 1px solid darkblue;
            height: 200px;
        }
        
        .chuizhi_center_box {
            display: table-cell;
            vertical-align: middle;
            border: 1px solid darkcyan;
        }
        
        .position_center {
            position: relative;
            height: 200px;
            border: 1px solid darkcyan;
        }
        
        .position_center_box {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            height: 100px;
            background-color: darkgoldenrod;
        }
        
        .position_center_boxelse {
            position: absolute;
            top: 50%;
            transform: translate(0, -50%);
            background-color: darkgray;
        }
        
        .center {
            height: 200px;
            width: 500px;
            position: relative;
            border: 1px solid firebrick;
        }
        
        .pos_marauto {
            width: 100px;
            height: 100px;
            background-color: darkseagreen;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
        
        .pos_mar- {
            width: 100px;
            height: 100px;
            background-color: darkslateblue;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -50px;
            margin-left: -50px;
        }
        
        .pos_transform {
            position: absolute;
            left: 50%;
            top: 50%;
            border: 1px solid darkcyan;
            transform: translate(-50%, -50%);
        }
        
        .flex_center {
            height: 200px;
            width: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .table_center {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0">
    <title>菜鸟居中demo</title>
 <style></style>
</head>

<body>
    <div>
        <div class="width_center">
            定宽块级元素水平居中
        </div>
        <div class="nowidth_center1">
            不定宽块级元素水平居中1
        </div>
    </div>
    <div class="flex_center">
        <div>
            flex布局居中
        </div>
    </div>
    <div class="center">
        <div class="pos_transform">
            水平垂直居中绝对定位+transform.固定宽高
        </div>
        <div class="pos_marauto">
            水平垂直居中绝对定位+margin:auto.固定宽高
        </div>
        <div class="pos_mar-">
            水平垂直居中绝对定位+margin:负数.固定宽高
        </div>
    </div>
    <div>
        <div class="nowidth_center2">
            <div>
                不定宽块级多个元素水平居中2
            </div>
            <div>
                不定宽块级多个元素水平居中2(或者父级text-align: center;子级display: inline-block;)
            </div>
        </div>
    </div>
    <div class="position_center">
        <div class="position_center_box">
            position垂直居中
        </div>
        <div class="position_center_boxelse">
            position transform垂直居中(未知元素大小)
        </div>
    </div>
    <div class="chuizhi_center">
        <div class="chuizhi_center_box">
            多行文本垂直居中
        </div>
        <div class="chuizhi_center_box">
            多行文本垂直居中
        </div>
    </div>
</body>

</html>