纯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怎么设置水平居中”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。