CSS控制子元素水平垂直居中（一）

最新推荐文章于 2023-09-30 13:11:25 发布
最新推荐文章于 2023-09-30 13:11:25 发布
阅读量515 收藏 1
点赞数
分类专栏： 居中问题 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44606064/article/details/114528268
版权

水平居中

一.文本水平居中
方法1

在这里插入图片描述
在这里插入图片描述
文本在盒子中水平居中只需要设置盒子的一个属性text-align: center;即可。

方法2

盒子开启flex布局，设置水平居中，这个取决于flex-direction。
在这里插入图片描述

在这里插入图片描述

二、子盒子的水平居中
方法1：

在这里插入图片描述
设置子盒子margin:0 auto;盒子自动居中。

方法2

父盒子开启相对定位，子元素设置如下
在这里插入图片描述

在这里插入图片描述

方法3

设置子元素左边距为父元素宽度的50%，然后左平移-50%
在这里插入图片描述
在这里插入图片描述

方法4

开启父盒子的flex布局，flex yyds!
在这里插入图片描述
在这里插入图片描述

垂直居中

文本垂直居中
方法1

开启父盒子flex
在这里插入图片描述

在这里插入图片描述

方法2

设置文本行高和父元素高度一样

块元素垂直居中
方法1

父元素开启flex布局
在这里插入图片描述

方法2

开启父元素的相对定位，设置子元素如下
在这里插入图片描述
在这里插入图片描述
方法3
……

编程小飞
关注
专栏目录
CSS实现元素水平垂直居中的各种方法
Kotlin0139的博客
07-16 1万+
在设计网页页面的过程中，总会有将元素或者文字进行水平或者垂直居中的要求，各种CSS样式调整，搞的头都大了。这里将会介绍CSS中几种常用到的水平垂直居中的方法，希望能够对你有所帮助。...
CSS实现子元素在父元素中水平垂直居中的方法总结
weixin_42678796的博客
10-12 827
运行效果 HTML结构 <div class="container"> <div class="content"></div> </div> 实现方式 1. 绝对定位 + margin:auto 思路：绝对定位使子元素脱离文档流，再将各方向定位值设置为0，由margin自动分配剩余空间，从而实现元素的水平垂直居中 .container { width: 200px; height: 200px;
CSS让子元素快速水平垂直居中的几种方法
qq_43855065的博客
07-02 426
方法有很多这里列出几种常用的 CSS代码如下 父元素类名以out打头，子元素类名以in打头 one,two…代表不同的方法 <style> *{ padding: 0; margin: 0; } [class*=out]{ width: 200px; height: 200px; background-color: pink; margin: 20px; ...
CSS：父子元素，让子元素居中
weixin_34344403的博客
03-01 1468
2019独角兽企业重金招聘Python工程师标准>>> ...
CSS实现垂直居中的6种办法
weixin_68258851的博客
07-18 9141
父子元素都不确定宽高的情况也适用。如果子元素的宽高确定的话，translate中的值也可以设置为子元素宽高的一半，即transformtranslate(-100px,-100px);这种方式适合子元素宽高确定的情况，给margin-top设置百分比的大小将不生效，即margin-top-50%;这种方式需要父元素的宽高都是确定的，才能保证子元素在父元素中垂直水平都居中。这种方式要求父元素的高度是确定的，百分比形式的高度将不能生效。这种方式适用于父元素高度确定的情况。父子元素宽高都未知时也适用。...
css 实现垂直居中的五种方法
weixin_47192515的博客
08-31 3076
css实现垂直居中的五种方法
让几个横向排列的浮动子div居中显示的方法
敲键盘的猫
10-14 734
div设置成float之后，就无法使子div居中显示了，那么如何让几个横向排列的浮动的div居中显示呢，下面有个不错的方法，希望对大家有所帮助 div设置成float之后，在父div中设置text-align:center，就无法使子div居中显示了，不过我们可以使用变通的方法达到这一效果，就是在父div上再套一个div，如下： 复制代码 代码如下:
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
在CSS布局设计中，使元素水平垂直居中是一项常见的需求。本文将详细解析两种主流的实现方法，并通过实例代码进行演示。 首先，我们来看第一种方法：使用`flexbox`(弹性盒模型)布局。Flexbox是CSS3引入的一种布局...
css 水平居中，垂直居中，自适应宽度的代码
09-25
- 使子元素垂直居中: `align-items: center;` ##### 3. 示例代码 ```html 垂直居中的文本 * { margin: 0; padding: 0; } .container { display: flex; align-items: center; height: 100vh; /* ...
CSS中实现元素水平居中、垂直居中的6个方法（详解）
最新发布
xtcbql的博客
09-30 3万+
CSS中实现元素居中6个的方法、text-align、margin：auto、line-height、flex布局、position
css 居中问题的总结
qq_43889848的博客
05-15 2281
1.css让浮动的盒子水平居中 解决方法： 给浮动的盒子加一个父盒子，设置宽度跟浮动盒子一样大小，并且overflow:hidden; 设置该盒子为margin: 0 auto; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0; margin:
使子元素水平垂直居中的方法
CSDNHtmlCssJava的博客
03-02 1885
方法一 转行内块方法 通过把子元素display:inline-block；转换成行内块元素，这时给父元素添加text-align:center;该声明对行内元素以及行内块元素生效，可以使子元素实现水平居中，在通过给父元素添加line-height行高，行高属性值等于父元素自身的高度，可以使子元素行内块在垂直的中线排列，最后给子元素添加vertical-align:middle;可以使子元素对齐方式从底线对齐，变成中线对齐。 方法二 使用定位方法实现居中 通过给父元素添加定位和给子元素添加绝对定位po
CSS实现子元素垂直居中对齐
KatherineLYP的博客
08-21 7886
子元素垂直居中对齐
开发笔记-css让子元素横向排列并自动换行
yuanfen7650的专栏
04-10 4043
一句话可以搞定的，百度一堆没用的信息，这里记录一下！ display: flex; flex-wrap:wrap;
【CSS】【排列对齐】元素或内容在父div中居中显示的几种方式
天天向上 Up Up Up (*^▽^*)
05-28 1241
微信小程序-设置多个子元素水平居中或垂直居中
Hillbox
04-02 1万+
注：每种情况的美化CSS样式已经删去。 &lt;view class='father'&gt; &lt;view class='children'&gt;子元素&lt;/view&gt; &lt;view class='children'&gt;子元素&lt;/view&gt; &lt;view class='children'&gt;子元素&lt;/view&gt; &l
多个div水平排列并且居中
apurelotus的博客
05-25 2万+
最直接想到的就是流式布局，这种不用在这里写了。下面这种方法有两个关键点text-align: center;display: inline-block;具体的代码在下面：&lt;style type="text/css"&gt; #div1{text-align: center;width: 800px;height: 40px;} .div2{display: inline-block;pa...
HTML中CSS文本、子元素、图片水平居中和垂直居中的几种方法
Emily
01-17 2万+
CSS文本居中 1.单行文本居中 水平居中：text-align:center; 垂直居中：line-height:XXpx;/*line-height与该元素的height的值一致*/ &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/t..
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

编程小飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值