您正在使用 IPV4 [3.234.244.181] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
悟空收录网       [公益]保护绿色环境,构建和谐社会      

【腾讯云】2核2G4M云服务器新老同享99元/年,续费同价      
[公益] 地球是我家,绿化靠大家      
2024年 劳动节 006
2024年 端午节 046
2025年 元 旦 251
2025年 春 节 279
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
CSS设置水平垂直居中的7种方法
内容摘要: 1.水平居中-文本或行内元素使用text-align属性.parent{text-align:center;/*子元素如果是内联或内联块元素,将会水平居中*/}!--HTML--divclass='parent'p这是要居中的文本/pimgsrc='image.jpg'alt='图片'/div2.水平居中-块级元素使用margin:0auto.child{w......
1.水平居中-文本或行内元素

使用text-align属性

.parent{

text-align:center;/*子元素如果是内联或内联块元素,将会水平居中*/

}

<!--HTML-->

<divclass="parent">

<p>这是要居中的文本</p>

<imgsrc="image.jpg"alt="图片">

</div>

2.水平居中-块级元素

使用margin:0auto

.child{

width:300px;/*需要给定一个宽度*/

margin:0auto;/*左右外边距自动分配*/

}

<!--HTML-->

<divclass="parent">

<divclass="child">这是要居中的块级元素</div>

</div>

3.使用Flexbox

.parent{

display:flex;

justify-content:center;/*水平居中*/

}

<!--HTML-->

<divclass="parent">

<divclass="child">这是要居中的任何元素</div>

</div>

4.垂直居中-单行文本

使用line-height

.parent{

height:100px;/*给定一个高度*/

}

.child{

line-height:100px;/*与父元素高度相同*/

}

<!--HTML-->

<divclass="parent">

<pclass="child">这是单行垂直居中的文本</p>

</div>

5.垂直居中-多行文本和块级元素

使用Flexbox

.parent{

display:flex;

flex-direction:column;

justify-content:center;/*垂直居中*/

}

<!--HTML-->

<divclass="parent">

<divclass="child">这是多行垂直居中的内容</div>

</div>

6.水平和垂直居中-Flexbox或Grid

Flexbox方式

.parent{

display:flex;

justify-content:center;

align-items:center;/*垂直居中*/

}

<!--HTML-->

<divclass="parent">

<divclass="child">水平和垂直居中</div>

</div>

Grid方式

.parent{

display:grid;

place-items:center;/*这相当于align-items:center和justify-items:center的简写*/

}

<!--HTML-->

<divclass="parent">

<divclass="child">使用Grid布局实现水平和垂直居中</div>

</div>

7.使用position和transform

当元素尺寸未知时,可以使用此方法。

.parent{

position:relative;

}

.child{

position:absolute;

top:50%;

left:50%;

transform:translate(-50%,-50%);

}

<!--HTML-->

<divclass="parent">

<divclass="child">无论尺寸如何都会水平和垂直居中</div>

</div>

这些是CSS中最常用的居中方法,根据实际需求选择合适的策略。

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:html table+css实现可编辑表格的示例代码

 

下一篇:CSS中隐藏元素的常见5种方法

发布日期:2024/3/21
手机扫二维码直达本页
发布时间:22:11:39
点  击:167
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,奇安信网站卫士提供加速防护
运行时间载入中.....