首页 > 其他分享 >通过CSS设置元素水平垂直居中的方式大全

通过CSS设置元素水平垂直居中的方式大全

时间:2024-04-06 14:00:17浏览次数:20  
标签:居中 color 100px height width background 400px CSS 大全

元素水平垂直居中方法

方案一、弹性盒子沿主轴和侧轴居中

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
    
    justify-content: center;
   	align-items: ceter;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
}

方案二、弹性盒子设置自动的边距

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    display: flex;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    
    margin: auto;
}

方案三、定位设置子元素左上角位于父元素中心,然后通过translate参考自身宽高,分别移动-50%

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%)
}

方案三、通过margin计算上下边距设置垂直居中,然后用auto实现水平居中

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
	margin: 150px auto;
}

方案四、类似方案二,设置上下左右距离都是0,然后设置auto的边距

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

方案五、类似方案三,先将子元素左上角定位到父元素中心,然后利用margin参考自身宽高,分别左移和上移50%

.outer {
    width: 400px;
    height: 400px;
    background-color: #888;
    position: relative;
}
.inner {
    width: 100px;
    height: 100px;
    background-color: orange;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
}

标签:居中,color,100px,height,width,background,400px,CSS,大全
From: https://www.cnblogs.com/gin49sz/p/18117379

相关文章

  • CSS样式继承
    CSS样式继承是指子元素会继承父元素的某些样式属性。常见的可以继承的CSS属性包括font-family、color、font-size、line-height。1.color子元素会继承父元素的文字颜色。.parent{color:blue;}.child{/*子元素继承父元素的文字颜色*/}2.font-size......
  • CSS隐藏元素的多种方式
    CSS中隐藏元素有多种方式,主要区别在于元素隐藏后是否占据空间以及是否会对文档流产生影响。1.display:none完全隐藏元素,不占据任何空间。.demo{display:none;}2.visibility:hidden隐藏元素,但仍占据空间。.demo{visibility:hidden;}3.opacity:0......
  • SSM(Spring+SpringMVC+MyBatis)常用注解大全
    提示使用浏览器查找系统也快速查找,可避免漏看和疲劳Win:Ctrl+FMac:Command+F@Bean功能:用于在配置类中声明一个bean。用法:@ConfigurationpublicclassAppConfig{@BeanpublicMyServicemyService(){returnnewMyServiceImpl();}}@Com......
  • 62.html+css网页设计实例/“动漫”主题海贼王介绍/web前端期末大作业/
    一、前言  本实例以“动漫”海贼王为主题设计,div+css布局,页面代码简单,质量好,是个不错的学生网页设计作业源码。【关注作者|获取更多源码(2000+个Web案例源码)|优质文章】;您的支持是我创作的动力!【点赞收藏博文】,Web开发、课程设计、毕业设计有兴趣的联系我交流分享,3Q!二、......
  • CSS设置网页颜色
    前言:我们在电脑显示器,手机屏幕,电视上面看到的颜色都是通用三种颜色混合而成的:红(red),绿(green),蓝(blue)简称为三原色,按照不同的比例就可以配出其他的颜色。在CSS中提供了一些属性可以用来设置颜色如color,可以用来设置文字的颜色,下列是描述颜色的6中方式:值说明例颜色名字......
  • 如何使用CSS变量 - 通过代码示例解释
    如果你正在构建网站或Web应用程序,你应该已经知道代码重复被认为是一种不良实践。这就是为什么你应该学习如何使用CSS变量来减少你编写的CSS代码量并将你的样式带到一个新的水平。最成功的Web应用程序拥有令人惊叹的设计。不幸的是,为了达到预期的效果,Web开发人员需要准备大量的样......
  • lessc assets/index.less assets/index.css这个命令的作用是什么?
    lesscassets/index.lessassets/index.css这个命令的作用是什么?lesscassets/index.lessassets/index.css这条命令是用来编译Less样式表文件的。具体来说,它的作用如下:lessc:这是Less编译器的命令行工具(lesscstandsforlesscompiler)。它是Less预处理器的一个组成......
  • adb命令大全(含高级用法,均已实际使用验证)
    目录Android调试桥(adb)Ubuntu系统安装adbadb命令基础用法adb命令高级用法Android调试桥(adb)ADB是一款多功能命令行工具,可让你通过USB或Wi-Fi与Android设备通信。它用于各种任务,包括:调试应用程序安装和卸载应用传输文件检索设备信息运行shell命令Ubun......
  • 【HTML5+CSS3】HTML知识点+自主练习
    一、W3C标准结构:HTML表现:CSS行为:JavaScript二、HTML常用标签排版标签(标题标签、段落标签、换行标签、分割标签、 文本格式化标签)媒体标签(图片标签、音视频标签)超链接标签(超链接标签)布局标签(div标签、span标签、HTML5新增语义化标签)三、HTML学生示例代码​<!--......
  • c++排序大全
    1#include<iostream>2usingnamespacestd;3intmain(){4inta[10]={3,6,1,5,4,8,7,10,9,2};5for(intj=0;j<9;j++){6for(inti=j+1;i<10;i++){7if(a[j]>a[i]){8swap(a[j],a[i]);9......