纯css怎么设置​水平居中

这篇文章主要介绍“纯css怎么设置水平居中”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“纯css怎么设置水平居中”文章能帮助大家解决问题。

水平居中

html:

<div class="parent">
    parent
    <br>
    <div class="child">
        child
    </div>
</div>

css:

html, body {
    margin: 0;
    width: 100%;
    height: 100%;

    .parent {
        width: 100%;
        height: 100%;
        background: #fac3fa;
        
        .child {
            width: 50%;
            height: 50%;
            background: #fe9d38;
        }
    }
}

方案一: text-align(父) + inline-block(子)

代码:
css:

.parent {
    text-align: center;

    .child {
        display: inline-block;
    }
}

方案二: 块级元素 + margin: 0 auto;

.child {
    display: block; // 非块级元素时设置
    margin: 0 auto;
}

方案三: absolute + transform

.parent {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

方案四: flex

注: 由于使用flex的关系, 这里去掉了 parent 和<br>

.parent {
    display: flex;
    justify-content: center;
}

css的基本语法是什么

css的基本语法是：

1、css规则由选择器和一条或多条声明两个部分构成；

2、选择器通常是需要改变样式的HTML元素；

3、每条声明由一个属性和一个值组成；

4、属性和属性值被冒号分隔开。

关于“纯css怎么设置水平居中”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。