CSS(Cascading Style Sheets)层叠样式表,是在1996年左右,W3C(万维网联盟)做HTML标准化的同时在HTML4.0之外开发的,拯救了当时越来越臃肿杂乱的HTML。
本文将按照由简单至复杂的顺序,展示在固定宽高的父容器中,实现单个子元素垂直水平居中的9种方式。
首先的HTML<body>部分都是<div>包含一个<p>:
<div class="box">
<p>I'm Centered</p>
</div>
为了方便观察,CSS部分默认给<div>加了固定宽高和边框,给<p>加了底色:
.box {
width: 300px;
height: 200px;
border: 1px solid;
}
p {
background: lightblue;
}
此时<p>是默认的块级盒子,撑满了内容所在的一整行:
途径一:使用grid布局
- 父容器设置
align-items
justify-items
为center