css 宽高未知的子元素在父容器上下左右居中

最新推荐文章于 2023-01-08 22:49:13 发布
最新推荐文章于 2023-01-08 22:49:13 发布
阅读量1k 收藏
点赞数
分类专栏： css学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Sukla/article/details/79714686
版权

1，方法一

效果


代码

<!--Created by Sukla on 2018/3/27.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>未知宽高上下左右居中</title>
    <meta charset="utf-8">
    <style>
        .container{
            display: table-cell;
            width: 500px;
            height: 500px;
            text-align: center;
            vertical-align: middle;
            background-color: #000000;
        }
        .item{
            display: inline-block;
            width: 100px;
            height: 50px;
            background-color: #ff6600;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item"></div>
</div>
</body>
</html>

2、方法2

效果


代码

<!--Created by Sukla on 2018/3/27.-->
<!DOCTYPE html>
<html>
<head lang="en">
    <title>未知宽高上下左右居中</title>
    <meta charset="utf-8">
    <style>
        .container{
            width: 500px;
            height: 500px;
            position: relative;
            background-color: #000000;
        }
        .item{
            width: 50px;
            height: 100px;
            position: absolute;
            margin: auto;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            background-color: #22bd7a;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="item"></div>
</div>
</body>
</html>


Sukla
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css子元素完美居中的四种方法
yu_uy88的博客
08-22 3364
css子元素完美居中的四种方法 弹性盒子实现居中 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>盒子完美居中</title> <style
css 未知高度元素绝对居中
12-23
在CSS布局设计中，使一个未知高度的元素居中对齐是一个常见的挑战。未知高度意味着元素的高度会在不同的内容或屏幕尺寸下变化，因此需要一种灵活且适应性强的解决方案。本篇将详细介绍如何实现这种居中效果，以及...
设置子元素在一个不清楚宽高的父元素中垂直居中
qq_36008786的博客
03-27 1560
通过以下两种方法便可以实现垂直居中的操作了，并且可以实现子元素在一个不清楚宽高的父元素中垂直居中的效果。 方法1. 使用定位和负margin可以实现。 （缺点：这种方法可以不用知道父元素的宽高，但是必需得知道子元素的宽高才可以设置）<style type="text/css"> .parent{ /*父元素宽高随便设置*/ width: 700px;
使用CSS完成元素居中的七种方法
zhh_Tony
09-29 209
在网页上使 HTML 元素居中看似一件很简单的事情. 至少在某些情况下是这样的，但是复杂的布局往往使一些解决方案不能很好的发挥作用。 在网页布局中元素水平居中比元素垂直居中要简单不少，同时实现水平居中和垂直居中往往是最难的。现在是响应式设计的时代，我们很难确切的知道元素的准确高度和宽度，所以一些方案不大适用。据我所知, 在CSS中至少有六种实现居中的方法。我将使用下面的HTML结构从简单到复杂开
子元素垂直、左右居中的问题
深谷逸风的博客
03-24 671
子元素垂直、左右居中的问题
css不知父元素宽高时水平垂直居中
qq_45184152的博客
08-28 214
<div id="main" style="width:1000px;height:500px;background-color:#ff0;position:relative"> <div id="d1" style="width:200px;height:200px;"></div> </div> css方式一：相对定位 #d1{ b...
CSS解决未知高度的DIV垂直居中
11-03
1. **Table Display Model**：通过将父元素的`display`属性设置为`table`，子元素设置为`table-cell`，可以利用表格模型实现垂直居中。 2. **Positioning and Offset**：通过定位技术和偏移量来实现垂直居中，这种...
CSS3手机移动端上下左右居中代码.zip
07-04
通过设置`display: flex`在容器上，并利用`align-items: center`和`justify-content: center`，可以让子元素在主轴和交叉轴上都居中。 ```css .container { display: flex; align-items: center; /* 垂直居中 */ ...
利用css设置元素垂直居中的解决方法汇总
09-24
- **方法三（使用`padding`）**：在父元素和子元素上设置合适的`padding`值。 ```css #parent { padding: 5% 0; } #child { padding: 10% 0; } ``` - **方法四（使用`display: table`）**：适用于行内...
经常用的图片在容器中的水平垂直居中实例
10-30
在网页设计与开发过程中，将图片（特别是那些尺寸未知的图片）在指定的容器内进行水平和垂直居中是一项常见的需求。这种布局技巧不仅可以提升用户体验，还能使页面看起来更加整洁美观。本文将详细介绍一种兼容多种...
html div 自适应剧中 上下左右全部居中
09-03
html div 自适应剧中 上下左右全部居中
在不知道父子元素的宽高时，怎么水平垂直居中
丁哒哒的博客
11-05 1287
在面试时经常会问到css布局的问题，尤其是居中问题，于是把想到的方法做以下总结。如有补充，欢迎私聊哦~ 一、块级元素 1、flex方法 HTML文件 <body> <div class="father"> <div class="child"></div> </div> </body...
【面试篇】不知道父元素宽高的情况下，实现元素的水平垂直居中
qq_42816270的博客
01-08 96
【面试篇】不知道父元素宽高的情况下，实现元素的水平垂直居中
如何在div 未知宽度的情况下，上下左右居中 css
weixin_59519449的博客
11-29 200
思路： 相当于父相子绝的原理： 给予一个float:left；来一个相对定位position: absolute; 左上50% ，其次transform: translate(-50%,-50%); 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
[css] 写出固定子容器在固定的父容器下水平垂直居中的布局
歌谣的博客
01-16 310
[css] 写出固定子容器在固定的父容器下水平垂直居中的布 1.父容器 position: relative,子元素 position: absolute;left: 50%;top: 50%;transform:translate3d(-50%,-50%,0). 2.父容器 display:flex; align-items:center;just-content:center. 个人简介 我是歌谣，欢迎和大家一起交流前后端知识。放弃很容易， 但坚持一定很酷。欢迎大家一起讨论 主目录 与歌谣一起通关前端
子父元素宽高未知情况下垂直水平居中方法
soda_mmfish的博客
05-27 551
1. 相对于屏幕可视区域垂直水平居中 方法一： position: fixed; top: 0; left: 0; right: 0; bottom: 0; margin: auto; 方法二： position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); cursor: pointer; 2. 相对于父元素垂直水平居中 方法一： position: absolute; top: 0; left: 0; right: 0;
未知高度和宽度元素 上下左右居中
cotexarm7的专栏
04-19 895
未知宽高元素水平垂直居中 .outer { position: fixed; width: 100%; height: 100%; top: 0; left: 0; } .inner { position: absolute; left: 50%; margin-left:
使不知宽高的元素水平垂直居中的方法
Zerofishcoding的博客
09-15 1659
本文主要介绍如何使元素居中显示的几种方法，当然方法有很多，现在记录的不过是笔者目前能够想到的几种：定位、table-cell、增加空span、弹性盒模型。
div 未知宽高实现上下左右居中
魏毅博的博客
07-21 452
div { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); }
css 上下左右居中
最新发布
06-05
1. 水平居中：使用text-align属性设置父元素的文本水平居中，然后将子元素设置为inline-block元素并设置width属性，即可实现子元素在父元素中水平居中。例如： ``` .parent { text-align: center; } .child { ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值