首页 > 试题广场 >

说几个未知宽高元素水平垂直居中方法

[问答题]
说几个未知宽高元素水平垂直居中方法
添加回答
南念zzz头像 南念zzz
/* 1.position */ /* .f { width: 80px; height: 80px; position: relative; background-color: green; } .c { width: 30px; height: 30px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background-color: burlywood; } */ /* 2.flex */ /* .f { width: 80px; height: 80px; display: flex; justify-content: center; align-items: center; background-color: green; } .c { width: 30px; height: 30px; background-color: burlywood; } */ /* 3.display:table-cell */ /* .f { width: 80px; height: 80px; background-color: green; display: table-cell; text-align: center; vertical-align: middle; } .c { width: 30px; height: 30px; background-color: burlywood; display: inline-block; } */
发表于 2022-05-19 10:18:42 回复(0)
捕夢头像 捕夢
；1、使用相对定位，绝对定位来做，元素：position：sbsolute，left：50%，top：50%，tranform：translate（-50%，-50%） 2、 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ， 3.设置元素的父级为网格元素`display: grid`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简介，但是兼容性ie 10以上支持 4. 设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block;
发表于 2022-06-12 15:16:30 回复(0)
弥希miki单推人头像 弥希miki单推人
一般常见的几种居中的方法有： 对于宽高固定的元素 （1）我们可以利用margin:0 auto来实现元素的水平居中。 （2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水 平和垂直方向上的居中。 （3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素 的中心点到页面的中心。 （4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素 的中心点到页面的中心。 （5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对 齐，然后它的子元素也可以实现垂直和水平的居中。 对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。
发表于 2022-08-15 19:26:41 回复(0)
牛客294325363号头像 牛客294325363号
好像不是left:50%；right:50% 是left:50%；top:50% 然后再translate
发表于 2022-05-31 19:53:00 回复(5)
牛客663468082号头像 牛客663468082号
{ display:flex; align-items:center; justify-content:center; } { position:absoolute; top,bottom,left,right:0 }
发表于 2022-05-17 21:46:18 回复(0)
夜&的钢琴曲头像 夜&的钢琴曲
可以使用父元素display:flex;设置justify-content:center;align-items:center; 使用定位position：absolute; top,bottom,left,right:0;
编辑于 2022-04-27 17:24:11 回复(2)
喜欢修勾的华夫饼在看机会头像 喜欢修勾的华夫饼在看机会
未知宽高元素水平垂直都居中的实现方法： 1. 设置元素相对父级定位`position:absolute;left:50%;top:50%`，让自身平移自身高度50% `transform: translate(-50%,-50%);`，这种方式兼容性好，被广泛使用的一种方式 2. 设置元素的父级为弹性盒子`display:flex`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简洁，但是兼容性ie 11以上支持，由于目前ie版本都已经很高，很多网站现在也使用这种方式实现水平垂直居中 3. 设置元素的父级为网格元素`display: grid`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center` ，这种方式代码简介，但是兼容性ie 10以上支持 4. 设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block; `，这种方式兼容性较好
编辑于 2022-07-20 15:52:50 回复(0)
牛客386887895号头像 牛客386887895号
display:felex;justify-content:center;align-items:center;--父级定位position:absolute;left:50%;right:50%,自身平移自身高度50% transform: translate(-50%,-50%);
发表于 2022-05-23 09:52:33 回复(1)
牛客301736805号头像 牛客301736805号
1.相对定位和绝对定位；父position：relative，子position：absolute'，left：50%，top：50%，transform（-50%，-50%） 1.1父元素的 position 属性设置为 relative。子元素的 position 属性设置为 absolute，然后设置 left: 0; right: 0; top: 0; bottom: 0;。 2.父级为弹性盒子，display：flex，justify-content和align-items都为center； 3.父级为网格元素，display：grid，place-items: center; 4.父级为表格元素，display：table,还有子元素设置为行内块级元素，text-align: center; vertical-align: middle;
发表于 2023-12-14 14:08:34 回复(0)
cmls头像 cmls
display:flex,grid,table-cell;transform(-50%,-50%);position:absolute;
发表于 2022-06-22 11:40:52 回复(0)
potato_993头像 potato_993
1、position+margin。position：absolute，left：0，top：0，right：0，bottom：0，margin：auto 2、position+transform。position：absolute，left：50%，top：50%，transform：translate（-50%，-50%） 3、flex布局。父元素display：flex，justify-content：center，align-items：center 4、grid布局。和上面flex的一样，只是flex改成grid 5、table-cell布局。父元素display：table-cell，text-align：center，vertical-align：center；子元素display：inline-block
发表于 2023-09-24 14:33:39 回复(0)
林夕111头像 林夕111
父盒子设置display:flex;justify-content: center;align-items: center;
发表于 2023-08-17 11:17:55 回复(0)
是我的神的你很想喝咖啡头像 是我的神的你很想喝咖啡
fiex弹性盒子布局，定位...
发表于 2023-02-28 16:17:11 回复(0)
root_CR7头像 root_CR7
1.设置元素相对于父级定位：position：absolute；left/top：50%，然后transform：translate(-50%,-50%);;; 2.设置父级display：flex；然后justify-content：center；align-items：center；；；
发表于 2022-10-12 11:31:31 回复(0)
勇敢的懒天钩头像 勇敢的懒天钩
还有一种最快的方法： 父级设置display：flex 子元素设置margin：auto
发表于 2022-09-20 19:48:29 回复(0)
00程序媛头像 00程序媛
父元素设置disyplay:flex;justify-content:center;aligin-items:center；也可以使用绝对定位：position:absolute,top:0,left:,right:0,bottom:0
发表于 2022-07-21 13:57:27 回复(0)
牛客782467112号头像 牛客782467112号
1.设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block; ` 2.父元素设置background-color: skyblue; display:flex; justify-content:center; align-items:center; position: absolute; top: 0; left:0; bottom:0; right: 0;
发表于 2022-05-20 09:39:35 回复(0)
顾言_t头像 顾言_t
1. position + top + left: position: absolute; left: 50%; top: 50%; 2.posiotn + transfrom: position: absolute; transfrom: translate(-50%,-50%); 3.flex: display： flex; justify-content: center; align-items: center; 4.gird: display: gird; justify-content: center; align-items: center; 5.table-cell: display: table-cell; text-align: center; vertical-align: middle; 子元素设为行内块元素 inline-block
发表于 2024-05-26 22:13:04 回复(0)
不想打工的小山竹很理性头像 不想打工的小山竹很理性
1、利用绝对定位，top和left设置50%；2、绝对定位，margin设置auto；3、display设置flex布局，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center’；4、 设置元素的父级为网格元素`display: grid`，设置父级和盒子内部子元素水平垂直都居中`justify-content:center; align-items:center`；5、设置元素的父级为表格元素`display: table-cell`，其内部元素水平垂直都居中`text-align: center;vertical-align: middle;` ，设置子元素为行内块`display: inline-block; `
发表于 2024-05-15 14:36:45 回复(0)
保持热忱天天向上头像 保持热忱天天向上
这里我简单介绍下五种布局。1.flex。设置display：flex；justify-content：center；align-items：center。 2.flex+margin。display：flex；margin：auto； 3.transform+abslute。transform：translate（-50%，-50%）；position:absolute; 4.table-cell。diplay：table-cell。 5.grid。display：grid。 实现如下
发表于 2024-05-12 21:39:42 回复(0)
提交观点

问题信息

HTML与CSS
上传者：real19931
难度：
90条回答 707浏览

热门推荐

相关试题

扫一扫，把题目装进口袋

求职之前，先上牛客

扫描二维码，进入QQ群

扫描二维码，关注牛客公众号