父元素未设置固定宽度，子元素水平垂直

最新推荐文章于 2021-12-12 15:57:24 发布
最新推荐文章于 2021-12-12 15:57:24 发布
阅读量156 收藏
点赞数
分类专栏： 前端 文章标签： html css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bruce_zhao1407/article/details/103791862
版权

网页布局中有可能遇到当父元素需要铺满，不能设置固定宽高，此时一些普通的子元素居中方法会失效

解决方法

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        html, body{
            width: 100%;
            height:100%;
            margin: 0;
            padding: 0;
            background-size: 100% 100%;
        }
        #surface{
            width: 100%;
            height: 100%;
            background-color: #000;
        }
        #core{
            width: 50%;
            height: 12%;
            background-color: #FFFFFF;
            vertical-align: middle;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div id="surface">
    <div id="core">
        
    </div>
</div>
</body>
</html>
溪午不闻钟_
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
不确定宽的子元素在父元素中的水平居中(也可以水平垂直居中)
bugBuilder
08-04 480
不确定宽的子元素在父元素中的水平居中 一般没有设置宽的子元素想要在父元素中水平居中,子元素可能是后端返回给我们的数据,将宽度写死肯定不合适,因此可用定位方法将子元素水平居中, 定位实现效果如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial
父级元素未设置高度和宽度时高度塌陷问题的解决方法
q1054261752的博客
03-02 1158
父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零 Document .box1{ border: 1px solid red; background-color: red; } .box2{ width: 200px; height: 200px; background-color: pink; float: left
关于未设置父元素宽度的block子元素显示
牧童
08-23 180
如果block父元素设置了宽度，而block子元素又没有设置宽度（我的理解是默认为一个单词/汉字的宽度），那么，假如 子元素的内容+padding + margin 超过了父元素的宽度，则，子元素的内容将会自动换行，每一行的最小内容为一个单词(汉字)，然后计算该行的内容 + padding + margin，超过父元素的宽度，重复换行操作，直到所有内容显示。这个时候，假如父元素没有设置高度，那么...
writing_mode:vertical-lr和flex-direction布局以及蒙古文展示
weixin_42313854的博客
12-12 1286
蒙古文是从上到下，从左到右书写的，所以一般布局中，div布局要横向排列。这时我一般都是父div为flex-direction：row .category_1{ background: blueviolet; } .category_2{ background: #fd0101; } .detail{ display: inline-block; } .flex_test{ display: f
css 父级元素宽度根据后代元素最大固定宽度自适应
qq_34870529的博客
05-15 2013
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>css 实用技巧</title> <style> div{ .
HTML对于元素水平垂直居中的探讨
09-28
这种方法要求父元素具有`position: relative`，以便计算子元素的相对位置。 2. **绝对定位法结合JavaScript/jQuery**： 同样使用绝对定位，但通过JavaScript或jQuery动态计算元素的宽度和高度，然后设置`margin-...
宽度高度不固定的div 如何水平居中以及垂直居中
09-25
设置父容器为相对定位，子元素绝对定位并调整top和left值为其高度和宽度的一半的负值： ```css .parent { position: relative; } .child { position: absolute; top: 50%; left: 50%; transform: ...
CSS2.1如何让块元素垂直水平居中.rar
05-02
- 设置父元素`position: relative;` - 子元素设置`position: absolute; top: 50%; left: 50%;` - 通过负外边距调整：`margin-top: -height/2; margin-left: -width/2;` 2. **使用表格布局**： - 父元素`display...
CSS水平垂直居中解决方案(6种)
09-24
首先，设置父元素为相对定位，然后子元素使用绝对定位，将其left和top属性设置为50%，再通过负margin值将元素向左和向上移动自身宽度和高度的一半，从而实现居中。例如： ```css .parent { width: 400px; height...
给行内块元素设置行高无法垂直居中.zip
10-25
3. 绝对定位：如果父元素设置了相对定位（`position: relative`），则可以通过绝对定位子元素并调整 `top` 和 `bottom` 属性来实现垂直居中。例如，`position: absolute; top: 50%; transform: translateY(-50%);`。...
在父容器没有高度的情况下给元素设置百分比高度
热门推荐
吴小迪的博客
05-15 3万+
在实际的开发过程中经常会有这种CSS问题，就是父容器是没有高度的，可是我还要给子容器设置百分比的高度。所以本篇博客就诞生了。就是为了帮助朋友们解决这个问题。 一：设置vh单位 vh单位就是自动检测你的设备的高度，会根据你设备高度的变化而调整，相对应的还要vw单位，自动检测设备的宽度的。关于vw和vh的实战可观看自适应屏幕的方法。 代码如下： <!DOCTYPE html> <h...
html固定div宽度自适应,css自适应布局：css宽度自适应如何实现？
weixin_29206669的博客
06-10 2300
如今的网页布局是需要适应于各种屏幕的，因此就需要来实现自适应使得网页中的内容来完全的显示，所以，今天的这篇文章就来给大家介绍一下关于css宽度自适应的内容。详细的说一说css自适应布局中css宽度自适应该如何实现。我们经常会看到这样的页面，左侧(或者右侧)为固定的导航或者菜单栏，另一侧将会随着浏览器的缩放而自适应改变其大小，这其实就是宽度自适应的实现。css宽度自适应中最常见的实现方法有两种，一种...
css设置元素 网页高度自适应,CSS宽高自适应（浮动元素的父元素高度自适应）...
weixin_34811804的博客
08-03 1201
说明：当父元素不设置高度的时候，第一级子元素浮动后，父元素高度塌陷；怎么去解决？(只要解决高度他显得问题，父元素就能实现高度自适应了)1、可以个固定高度去解决解决高度塌陷问题弊端：但是不能让元素高度自适应了 。2、overflow：hidden; 解决高度塌陷并能实现高度自适应的方法一；(遵循BFC的显示原则)3、在浮动元素的下方添加一个空元素，并且给他设置一下属性： ...
css设置元素继承父元素宽度_html – 如何使固定的div继承父级的宽度？
weixin_39684228的博客
12-22 992
在#header选择器上使用width属性的inherit值.为何如此有效通过指定position：fixed到#header元素,#header元素的位置是根据指定的视口计算的在CSS2规范中：但是,position：fixed不会改变DOM结构,这意味着#wrapper元素仍然是#header元素的父元素.作为一个结果,#header仍然可以从其父元素继承属性值,即使它的位置是相对于视口确定的...
父子元素绝对定位嵌套（父元素没有宽高），子元素right绝对定位竟出现错误？各位大神有答案的帮忙分析下原因
xysypch的博客
02-20 1672
父子元素绝对定位嵌套（父元素没有宽高），子元素right绝对定位竟出现错误？各位大神有答案的帮忙分析下原因 在工作中，遇到一个需要大量使用绝对定位的工作，碰到这样一个问题，问题描述如下： （1）父元素外边是一个相对定位，有宽高 （2）父元素绝对定位，但没有定宽高 （3）子元素是绝对定位，有宽高，left定位跟想要的结果相同，但把left换成right就出现错误了 代码片段如下： &amp;lt;div c...
子元素无法撑开父元素的情况
weixin_38278892的博客
01-08 9182
如果父元素已经规定了度，不会高度塌陷，但可能会溢出（如果子元素总高度超过父元素的话）如果父元素没有规定高度： 2.1 如果所有子元素都浮动，父元素没有高度，这时候给父元素设置边框的话，就会发现边框保不住子元素 2.2 如果存在没有浮动的子元素，父元素高度取决于没有浮动的子元素，所以如果浮动子元素更高的话，还是会塌陷 解决浮动的办法： clear:both，不允许元素两侧有浮动（你可以理解
css中子元素根据父元素设置百分比高度的问题。
fd214333890的专栏
12-03 2万+
关于设置html元素高、宽百分比时需要注意的一个细节。
父元素设置固定宽度并设置overflow:scroll，如何让子元素撑开父元素
weixin_30642561的博客
02-07 320
<div class=“a”> <div class=“b”> <div class=“c”>内容内容，很长的内容</div> </div></div> 给a设定一个固定宽度，并设定overflow:scroll，使其出现横向滚动条，但文字内容会自动换行，为了不换行，我给c设定white-space:nowrap，虽然达到了...
父元素没设置高度子元素自适应高度
susuzhe
07-31 2168
<div class="new_ctL_right right"> </div> </div> .new_ctL_title{position: relative;} .new_ctL_left{width:240px;height: 100%;background: blue;position: absolute;left: 0;top:0;
父元素宽度不固定怎么让子元素左右居中
最新发布
06-06
可以使用Flex布局来实现子元素左右居中对齐，具体实现方法... /* 父元素宽度不固定 */ } .child { margin: auto; /* 子元素左右居中 */ } ``` 这样设置之后，无论父元素的宽度是多少，子元素都可以水平居中对齐。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值