h5文字垂直居中_CSS实现居中的几种方式你都了解吗？

最新推荐文章于 2023-08-13 16:47:55 发布

weixin_39595271

最新推荐文章于 2023-08-13 16:47:55 发布

阅读量423

点赞数

文章标签： h5文字垂直居中网络虚拟化有几种实现方式

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>是默认的块级盒子，撑满了内容所在的一整行：

默认效果，未居中，p标签没到顶是因为自带了外边距

要达到的效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

关注关注