子元素在父元素水平垂直居中

最新推荐文章于 2023-08-06 21:03:55 发布
最新推荐文章于 2023-08-06 21:03:55 发布
阅读量83 收藏
点赞数
文章标签： css html5 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/abc219365/article/details/120109921
版权

子元素在父元素中水平垂直居中：

  1. margin去实现：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.items{

width: 300px;

height: 300px;

background-color: red;

overflow: hidden;

}

.title{

width: 100px;

height: 100px;

background-color: #008000;

margin: 100px;

}

</style>

</head>

<body>

<div class="items">

<div class="title"></div>

</div>

</body>

</html>

  1. padding去实现

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.items{

width: 300px;

height: 300px;

background-color: red;

padding: 100px;

box-sizing: border-box;

}

.title{

width: 100px;

height: 100px;

background-color: #008000;

}

</style>

</head>

<body>

<div class="items">

<div class="title"></div>

</div>

</body>

</html>

  1. 用定位去实现

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.items{

width: 300px;

height: 300px;

background-color: red;

position: relative;

}

.title{

width: 100px;

height: 100px;

background-color: #008000;

position: absolute;

top: 100px;

left: 100px;

}

</style>

</head>

<body>

<div class="items">

<div class="title"></div>

</div>

</body>

</html>

  1. 另一种绝对定为

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.items{

width: 300px;

height: 300px;

background-color: red;

position: relative;

}

.title{

width: 100px;

height: 100px;

background-color: #008000;

position: absolute;

top: 50%;

left: 50%;

margin-top: -50px;

margin-left: -50px;

}

</style>

</head>

<body>

<div class="items">

<div class="title"></div>

</div>

</body>

</html>

  1. 表格法（面试可以用）

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title></title>

<style>

.items{

width: 300px;

height: 300px;

background-color: red;

display:table-cell ;

vertical-align: middle;

}

.title{

width: 100px;

height: 100px;

background-color: #008000;

margin: 0 auto;

}

</style>

</head>

<body>

<div class="items">

<div class="title"></div>

</div>

</body>

</html>

abc219365
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
子元素在父元素水平垂直居中方法整理
m0_57712926的博客
10-07 873
文章目录前言一、方案一1. 思路2. 代码演示二、方案二1. 思路2. 代码演示三、方案三1. 思路2. 代码演示四、方案四1. 思路2. 代码演示三、 效果演示总结 前言 在网页的布局中，最常见的一种效果就是让子元素在父元素中水平垂直居中效果，虽说功能简单，但你有几种解决方式呢？今天整理了几种解决方式，一起来看下吧~ 一、方案一 1. 思路 利用父元素相对定位，子元素决定定位，计算子元素与父元素之间的距离。控制子元素的top和left值将其定位到父元素的正中央位置。 缺点：如果子元素或者父元
让子元素在父元素内垂直水平居中的方法
qq_43465434的博客
02-03 914
让子元素在父元素内垂直水平居中的方法 首先，我们先创建一个父盒子和一个子盒子，然后让子盒子在父盒子内部水平垂直都居中 <body> <div class="container"> <div class="box"></div> </div> </body> 1.最方便的弹性盒子 通过设置父元素盒子一下三个属性，就可以快速方便地使子元素盒子水平垂直居中，并且不需要计算： display: flex; justify-co
子元素相对于父元素水平垂直居中的几种方法
weixin_45571121的博客
08-17 3877
方式一：绝对定位 + margin（需要指定子元素的宽高，不推荐） 1.1 代码及效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d...
子元素在父元素中水平和垂直居中的几种方法
最新发布
usernameID007的博客
08-06 2293
通过将父容器的display属性设置为flex，并设置justify-content和align-items属性为center，可以使元素在父容器中水平和垂直居中。通过将元素的position属性设置为absolute，以及使用top、left、right和bottom属性，可以将元素相对于其父容器进行定位。将父容器的display属性设置为table，将子元素的display属性设置为table-cell，并使用vertical-align属性设置为middle，可以实现元素在父容器中垂直居中。
子元素在父元素中垂直水平居中
不甜呐的博客
05-08 1494
主要介绍 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位法</title> <style type="text/css"> .parent{ width: 200px; height: 300px; background-color: skyblue; position: relative;
CSS子块元素在父块元素水平垂直居中的几种方式
嘘...一只bug
03-06 1041
子元素在父元素中垂直水平居中的几种方式
HTML对于元素水平垂直居中的探讨
09-28
在网页设计中，元素的水平垂直居中是一个常见的需求，特别是在构建响应式布局或创建对话框、弹出窗口等组件时。HTML与CSS提供多种方法来实现这一目标。以下是对几种常见方法的详细探讨： 1. **绝对定位法**： 这是...
CSS实现子元素div水平垂直居中的示例
01-21
父元素加相对定位，子元素加绝对定位 .main{ width: 300px; height: 300px; background-color: red; position: relative; } .center{ width: 100px; height: 100px; background-color: skyblue; pos
css实现元素水平垂直居中常见的两种方式实例详解
09-24
在父元素上设置`display: flex`开启flex布局，然后通过`justify-content: center`和`align-items: center`分别设置水平和垂直居中。以下是一个完整的例子： ```html <!DOCTYPE html> , initial-scale=1.0"> ...
元素水平垂直居中的几种方法
01-20
这种方法可以同时实现水平和垂直居中，但要求父元素有固定尺寸，且子元素没有固定宽高。 第四种方法利用`flexbox`布局实现居中，这是现代CSS布局的标准方式。代码如下： ```css #box1 { width: 300px; height: ...
元素及文本的水平居中/垂直居中/绝对居中总结
09-25
在Web开发中，将元素进行水平居中、垂直居中或绝对居中是常见的布局需求。以下是关于如何实现这些居中的方法和注意事项的详细总结。 首先，讨论元素的水平居中。水平居中可以针对不同的元素有不同的实现方式。对于...
子元素在父元素中水平垂直居中
first_shun的博客
06-02 589
1.已知子元素的高度和宽度。通过定位的方式和子元素负边距实现。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> &...
子元素在父元素中水平垂直居中的六种方法
october_autumn的博客
03-29 1662
这里介绍六种方法使子元素在父元素中水平垂直居中，并且分析其优缺点。 目录 定位：三种 display: flex JavaScript display: table-cell 首先给出页面结构和默认背景色： （由于在浏览器中的显示结果都是水平垂直居中，所以就不附加运行图了。） HTML <div class="parent"> <div class="child"&g...
子元素在父元素中如何水平垂直居中，即放置在最中心位置
zhongqingtian的博客
05-27 652
子元素在父元素中如何水平垂直居中，即放置在最中心位置
怎么让子元素在父元素中水平垂直居中
chenlim87的博客
03-28 2990
第一种方法:使用绝对定位 此方法要求父元素要有高度,父元素开启相对定位,子元素开启绝对定位. 注意:如果父元素没有高度也没有开启相对定位,则子元素会相对于body水平垂直居中. 第二种方法:使用flex布局 在flex布局中父元素是子元素的容器,子元素是父元素的项目. 容器里设置的属性都是对于项目来说的, display:flex代表容器里的所有项目按flex布局, justify-conte...
如何让子元素在父元素中水平垂直居中七种方法
weixin_43062140的博客
07-15 932
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
CSS实现子元素在父元素中水平垂直居中的方法总结
weixin_42678796的博客
10-12 810
运行效果 HTML结构 <div class="container"> <div class="content"></div> </div> 实现方式 1. 绝对定位 + margin:auto 思路：绝对定位使子元素脱离文档流，再将各方向定位值设置为0，由margin自动分配剩余空间，从而实现元素的水平垂直居中 .container { width: 200px; height: 200px;
css中子元素在父元素中水平垂直居中
weixin_44942740的博客
11-21 466
1、父元素开启相对定位，子元素开启绝对定位，子元素中margin减去自身宽高的一半。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { marg...
子元素如何在父元素中水平垂直居中
非著名程序猿
03-23 154
文章目录1、父box高度固定，子box宽高固定2、父box高度固定，子box高度不固定3、父box高度固定，子box无论宽度高度固不固定 1、父box高度固定，子box宽高固定 方法1 <div class="box"> <div class="box-cont"> 水平垂直居中 <br> </div> </div> <style> .box { position: relative
元素在父元素中水平和垂直居中怎么控制
04-06
在父元素中设置display: flex;和justify-content: center; align-items: center;即可实现水平和垂直居中。如下所示： ``` .parent { display: flex; justify-content: center; align-items: center; } ``` 2. ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值