当前位置: 首页 > 面试题库 >

有一个width300,height300,怎么实现在屏幕上垂直水平居中?

乜栋
2023-03-14
本文向大家介绍有一个width300,height300,怎么实现在屏幕上垂直水平居中?相关面试题,主要包含被问及有一个width300,height300,怎么实现在屏幕上垂直水平居中?时的应答技巧和注意事项,需要的朋友参考一下

参考回答:

对于行内块级元素,

1、父级元素设置text-alig:center,然后设置line-height和vertical-align使其垂直居中,最后设置font-size:0消除近似居中的bug

2、父级元素设置display:table-cell,vertical-align:middle达到水平垂直居中

3、采用绝对定位,原理是子绝父相,父元素设置position:relative,子元素设置position:absolute,然后通过transform或margin组合使用达到垂直居中效果,设置top:50%,left:50%,transform:translate(-50%,-50%)

4、绝对居中,原理是当top,bottom为0时,margin-top&bottom设置auto的话会无限延伸沾满空间并平分,当left,right为0时,margin-left&right设置auto会无限延伸占满空间并平分,

5、采用flex,父元素设置display:flex,子元素设置margin:auto

6、视窗居中,vh为视口单位,50vh即是视口高度的50/100,设置margin:50vh auto 0,transform:translate(-50%)

 类似资料:
  • 问题内容: 我正在尝试在屏幕的正中央为我的网站中心的目标网页创建一个div,但是它不起作用。 这是我的代码 CSS: HTML: 谢谢。 问题答案: 注意: 如果您尝试将div水平和垂直居中放置,建议您查看flexbox。您仍然需要提供后备支持,但是flexbox是未来,这太神奇了。 更新: 现在所有现代浏览器都支持flexbox 。 首先,您需要给div静态宽度和高度。 其次,你必须设置和那么你

  • 问题内容: 如何使用flexbox在容器内水平和垂直居中div。在下面的示例中,我希望每个数字都彼此相邻(按行),并水平居中。 问题答案: 我认为您想要以下内容。 你的元素应该是块级(而非)如果你想要的高度和顶部/底部填充,以正常工作。 另外,在上,将宽度设置为而不是。 您的属性很好。 如果您希望垂直居中于视口中,请为和分配100%的高度,然后将页边距清零。 请注意,需要一个高度才能看到垂直对齐效

  • 如何使用FlexBox在容器内水平和垂直地居中div。在下面的例子中,我希望每一个数字在彼此下面(在行中),水平居中。 null null http://codepen.io/anon/pen/zlxbo

  • 本文向大家介绍javascript实现在指定元素中垂直水平居中,包括了javascript实现在指定元素中垂直水平居中的使用技巧和注意事项,需要的朋友参考一下 本章节介绍一下如何实现未知宽高的元素在指定元素下实现垂直水平居中效果,下面就以span元素为例子,介绍一下如何实现span元素在div中实现水平垂直居中效果,代码如下: 上面你的代码实现了span元素在div中垂直水平居中效果,下面简单介绍

  • 问题内容: 我弹出一个包含ASP.NET表单的弹出窗口,单击链接“请求信息”,然后出现该表单。 但是,具有链接“请求信息”以触发弹出窗口的页面包含很多内容,因此需要滚动才能看到该链接。 如果用户滚动阅读内容,则需要始终居中,否则,如果他们不滚动,弹出窗口仍将居中显示在屏幕上。 在绝对定位,整个页面宽度与边距设置为。 问题答案: 如果div具有固定的宽度和高度,请使用:(如果width = 120p

  • 问题内容: 有没有办法在 垂直和水平方向上输入一个DIV, 但这很重要, 当窗口小于内容时,内容将不会被剪切 。div必须具有背景色,宽度和高度。 我总是将div的中心定位为绝对位置和负边距,如提供的示例所示。但是它有一个问题,那就是削减内容的顶部。有没有一种方法可以将div.content居中而不会出现此问题? CSS: HTML: 我的问题不是重复的“如何在水平和垂直方向上居中放置元素?”1-