css样式居中,常见三种方式
2022/7/5 4:20:06
本文主要是介绍css样式居中,常见三种方式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
今天给大家分享三种关于css样式居中的方式,话不多说直接上代码:
1,水平居中
/*块级元素*/
/*1-外边距*/
{
margin: 0 auto;
}
/*2-定位*/
{
display: absolute;
left:50%;
transform:translateX(-50%);
}
设置了宽度,可以margin负值 + transform:translateX(-50%)实现;
/*行内元素*/
/*1-对齐 给父级元素添加*/
{
text-align: center;
}
2,垂直居中
1-块级元素;
/*定位*/
{
display: absolute;
top:50%;
transform:translateY(-50%);
}
设置了宽度,可以margin:-50% + transform:translateY(-50%)实现;
2-行内元素;
单行:行内子元素的高度等于块级父元素的高度即可
多行:给父元素添加
{
display: table-cell;
vertical-align:middle;
}
3,水平垂直居中
1, margin负值 + 定位(transform);
2, {
position:abosulate;
top:50%;
left:50%;
transform:transition(-50%,-50%);
}
3,flex布局居中
/*给父元素添加*/
{ display: flex;
justify-content: center; /*水平居中*/
align-items: center; /*垂直居中*/
}
4,grid布局居中
/*给父元素添加*/
{ display: grid;
place-align:center;
/*或者*/
place-content:center;
}
以上便是关于css样式居中,常见三种方式的全部内容,更多内容干货还可关注慕课网其他文章~
这篇关于css样式居中,常见三种方式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-07TailwindCSS从入门到实践:全面指南
- 2024-09-05Tailwind.css入门:快速上手指南
- 2024-08-29CSS9资料:入门级CSS教程与实用技巧指南
- 2024-08-29CSS定位资料大全:初学者入门指南
- 2024-08-29CSS 浮动资料:入门级教程与实践
- 2024-08-29CSS样式入门:快速获取与掌握CSS样式资料的指南
- 2024-07-18CSS中的伪类
- 2024-03-06css样式背景图怎么分开(css背景图片样式)-icode9专业技术文章分享
- 2024-03-06css线性样式(css中划线样式)-icode9专业技术文章分享
- 2024-03-06jq点击添加css样式(jq设置css样式)-icode9专业技术文章分享